Question

HTML：

<div id="test">This is a test</div>

JavaScript的：

var elem = document.getElementById('test');

elem.style.setProperty('color', 'green', 'important');
elem.style.color = 'red';

现场演示： http://jsfiddle.net/4fn6h/3/

Chrome，Safari和IE9中的文字为绿色，但Firefox和Opera中的文字为红色。（另外，IE7和IE8中的文本是黑色的，因为代码会抛出错误，但让我们忽略它......）

那么，哪些浏览器遵循此标准？是否可以覆盖setProperty(...,'important')？

Answer 1

规格尚不清楚。有两种方法可以看待它：

这是WebKit / IE9中的一个错误。如果您覆盖color值，则没有理由保留旧值，重要。
WebKit / IE9是正确的。 DOM接口style操纵元素的style属性，该属性被视为CSS Declaration Block。在CSS块中，设置为!important的属性始终优先于没有的属性。根据该规则，对“红色”的更改应该没有效果，因此它实际上被忽略了。

我认为后者是最可能的解释。考虑这样的声明：

p { color: red !important; }

如果您添加第二个color规则，但没有!important，则无效：

p {
  color: red !important;
  color: blue;
}
/* the color is still red */

这同样适用于直接操作HTML style属性。

因此，Chrome / Safari / IE9中的行为与CSS级联规则一致，而FF和Opera将DOM样式视为一个简单的对象而不考虑级联规则，而不是CSS声明的接口。

有趣的事实：webkit似乎正在为important进行字符串匹配，所以这也适用：

elem.style.setProperty('color', 'red', 'this is a really important rule');

并提示：下次选择一个更好的颜色对，你会让色盲很难帮助:)

Answer 2

可能是Firefox和Opera的行为更合适。

当你发出elem.style.color =＆＃39; red＆＃39 ;;你没有关掉重要的＆＃34;优先考虑颜色，在这种情况下，将颜色更改为红色是有意义的。至于为什么他们选择这样或那样做，我不知道。

Answer 3

是否可以覆盖setProperty（...，'important'）？是的它应该。但你必须通过另一个ele.style.setProperty电话来完成。看看this，您应该会在所有现代浏览器中看到red。

那么，哪些浏览器遵循此标准？由于green设置为!important，因此red不应替换为red，因为!important未设置为{{1}}。这意味着chrome，safari和IE9都遵循标准而firefox不是。