javascript - 加载css文件并覆盖前一个

Question

我想在 javascript 中加载 css 属性。

我有两个画布，我在 head 标签中加载了一个 css 文件。

我想在选择某个选项时这样做，画布的 css 会发生变化。如果它是简单的 css，它可以通过“canvas.style.csstext”来完成，但我正在应用变换来倾斜元素，所以它在“canvas.style.csstext”中不起作用。

那我该怎么做！

Answer 1

好的，我将在此处发布作为答案，以便其他人可以看到。

有多种方法，例如注入link元素或 use document.styleSheets[0].insertRule，但在您的情况下，更好的解决方案是将两个CSS文件包含在 header 中，使用不同的选择器，并canvas.className在需要时修改。

插图：

<link href="main.css" /> <!--canvas{border:...}-->
<link href="alternate.css" /> <!--canvas.alter{border:...}-->
<!--...-->
<canvas id="needToAlter"></canvas>
<button onclick="document.getElementById('needToAlter').className+=' alter';">Alter</button>