我一直在尝试使用 javascript 动态编写样式表。在 Firefox 中，可以在 styleSheets 的 cssRules 样式上使用 setProperty 方法，例如...
document.styleSheets[0].cssRules[0].style
.setProperty(propertyName, propertyValue, 'important');
...在样式上设置 !important 标志。我没有在 Internet Explorer 中找到与此等效的方法(setAttribute 方法没有用于在样式上设置 !important 标志的选项)。一些实验发现，对于精确的样式，例如 border-top-width， 我可以重写 cssText 字符串以添加 !important，但是然后我发现，如果你单独设置所有边框，IE 将实际规则重写为简写形式，因此它重写为 border-top, border-right,等等，每个都被设置，但没有 !important 标志。此外，如果我通过简写形式明确设置它，它不会接受重写 cssText 以采用 !important 标志。
所以问题是，有没有人知道一种方法，当动态地将样式写入 styleSheets 规则时，让 IE 始终为此设置 !important 标志规则？
谢谢你的帮助，
斯科特
最佳答案
我花了更多时间做一些测试，并得出结论，我对 cssText 的重写正在添加!important 对 IE 的一些神秘的内部标志设置很重要，即使为 cssText 本身重写的缩短属性并没有反射(reflect)出这一点。
显然，无论是 cssText 属性(如果在我重写后检查它以添加 !important)还是元素的 Microsoft Developer Toolbar 检查都没有显示事实该属性具有 !important 设置。但是，该元素显示为好像我的重写有效。我通过在图像边框的基本样式上放置一个 !important 来测试它，如下所示:
img {border: 3px solid green !important;}
然后使用 javascript 我创建了我的 styleSheets 对象并添加了一个更具体的规则(使用图像的 id)并且其 cssText 重写为 !important 在已经通过对 borderTopColor = red 的 javascript 调用设置了 styleSheets 对象的 style 之后。然后我设置元素的内联样式以将顶部颜色更改为黄色。结果与我对 !important 标志的预期一样。红色胜出，因为它是比原始绿色更晚(且更具体)的调用，并且内联样式不会覆盖它。如果我删除 !important 的重写，则颜色恢复为绿色，如果我删除绿色的 !important，则颜色恢复为黄色。
我还用绿色比我为红色编写的 javascript 样式具有更高的选择器特异性进行了测试。这也符合预期，绿色胜出，因为它现在与红色声明的竞争 !important 具有更高的选择器特异性。
这已经在 IE8、IE7 和 IE6 上进行了测试(是的，它也在那里工作)。虽然重写/设置 styleSheets 的 cssText 并不像能够通过对属性直接调用 javascript 来设置它那么容易，但至少它是有效的。真正的“错误”是 cssText 和 Developer Toolbar 都没有给我正确的信息，即在这些样式上设置了 !important 标志，所以如果有人回来检查网站时，他们可能会对样式发生的原因感到困惑(为什么看起来不重要的东西却表现得好像很重要)。
关于javascript - 在 Internet Explorer 动态编写的样式表中添加 !important，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3186617/