在为Internet Explorer动态编写样式表时添加!important

Question

我一直在尝试使用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标志？

感谢您的帮助，

Scott

- ScottS

---

我假设没有人对这个问题有任何解决方案可以提供（如果确实存在解决方案的话）？ - ScottS

Answer 1

我花了更多时间进行一些测试，得出结论：我对cssText的重写确实起作用了，可以将!important添加到IE的某些神秘内部标志设置中，即使它自己重写的缩短属性并未反映出来。 显然，无论是检查我重写后添加了!important的cssText属性，还是使用Microsoft Developer Toolbar检查元素，都没有显示该属性具有!important设置。 但是，该元素会按照我重写后的方式进行显示。 我通过在图像边框的基本样式上放置一个!important来进行测试，如下所示：

img {border: 3px solid green !important;}

然后用javascript创建了我的styleSheets对象，并添加了一个规则，该规则更具体（使用图像的id），并且在已经通过javascript调用的styleSheets对象的style为borderTopColor = red之后，将其cssText重写为! important。然后我设置了元素的内联样式，将顶部颜色更改为黄色。结果如预期的那样，!important标志胜出。红色胜出，因为它是比原始绿色更后（更具体）的调用，并且内联样式不能覆盖它。如果我删除重写的! important，则颜色将恢复为绿色，如果我删除绿色的! important，则颜色将恢复为黄色。

我还使用绿色比我用Javascript编写的红色样式具有更高的选择器专业性进行了测试。这也如预期那样行为良好，因为绿色现在具有更高的选择器专业性与红色声明的竞争！important。

这在IE8、IE7和IE6上进行了测试（是的，在那里也可以工作）。虽然重写/设置styleSheets的cssText并不像能够通过属性的直接javascript调用来设置那样容易，但至少它有效。真正的“错误”是事实上无论是cssText还是Developer Toolbar都没有给我正确的信息表明这些样式上设置了！important标志，因此，如果有人来检查该网站，他们可能会对样式发生的事情感到困惑（为什么似乎不重要的东西表现得像它是）。

- ScottS

Answer 2

我认为你最好的选择是编写你的 CSS，这样你就不必使用 !important 来覆盖级联样式。虽然这很糟糕，但这就是 IE 崩溃的原因。

- Nick

---

仅仅依靠级联有两个问题：1）如果级联中已经有另一个!important，或者2）在相关元素上设置了内联样式。实际上，我的问题更多的是关于是否有人知道一些方法来在IE中设置!important标志，这是我尚未能够找到的。 - ScottS