如何在JavaScript中添加和删除或禁用CSS规则？

Question

有没有办法在JavaScript中添加，删除或禁用CSS规则？这是CSS：

#myElement *, #myElement *:before {
   outline:1px dotted red;
}

这是我到目前为止所做的：

var myCSS = "#myElement *, #myElement *:before {outline:1px dotted red;}";
// document.addCSS(myCSS);

修改
我无法将规则添加到HTML页面并在它们之间切换。我需要能够在页面加载后在JavaScript中创建规则，并在JS中打开和关闭它。

Answer 1

好像你可以在Mozilla开发者网络上找到答案：

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

  

将新的CSS规则插入当前样式表

示例：

{{1}}

Answer 2

这样做的常用方法是使用类来打开/关闭样式。如：

#myElement.outline *, #myElement.outline *:before {
  outline:1px dotted red;
}

然后（在此示例中）您可以根据需要通过javascript添加/删除outline类。

Answer 3

您可以按照以下方式执行此操作：

<table>
<tr>
<td>a1</td>
<td>a2</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
</tr>
<tr>
<td>c1</td>
<td>c2</td>
</tr>
</table>

除了Internet Explorer＆lt; = 8，你必须在那里写

var sheet = document.styleSheets[0];
sheet.insertRule(".foo { color:pink; }", sheet.cssRules.length);

Answer 4

您可以使用className属性

添加类

document.getElementById("myElement").className += " MyClass";

您可以使用classList

添加多个类并删除类

 document.getElementById("myElement").classList.add('newclass');

 document.getElementById("myElement").classList.remove('newclass');