加载css文件并覆盖前一个

【问题标题】：loading css file and override the previous one加载css文件并覆盖前一个
【发布时间】：2012-08-13 19:03:44
【问题描述】：

我想在 javascript 中加载 css 属性。

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

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

那我该怎么做呢！

【问题讨论】：

您能否使用适当的选择器将该备用样式保存在另一个 CSS 文件中，并在需要时更改该画布的 className？
是的，我使用了不同的类名！成功了，谢谢！

标签： javascript html css html5-canvas

【解决方案1】：

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

有多种方法，例如注入 link 元素或使用 document.styleSheets[0].insertRule，但在您的情况下，更好的解决方案是将 CSS 文件包含在标题中，使用不同的选择器，并修改需要时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>

【讨论】：