javascript - 为什么这个 !important CSS 值会被覆盖？

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';

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

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

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

score 2 · Accepted Answer

规格不清楚。有两种查看方式：

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

我相信后者是最可能的解释。考虑有这样的声明：

p { color: red !important; }

如果添加第二color条规则，没有!important，它没有效果：

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

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

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

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

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

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

score 0 · Accepted Answer

是否可以覆盖 setProperty(...,'important') ？是的，它应该。但你必须用另一个ele.style.setProperty电话来做。看看这个，你应该red在所有现代浏览器中都能看到。

那么，哪些浏览器遵循这里的标准呢？由于green设置为!important，不应替换为red因为red未设置为!important。这意味着 chrome、safari 和 IE9 遵循标准，而 firefox 则没有。

score 0 · Accepted Answer

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

当您发出 elem.style.color = 'red'; 您没有关闭颜色的“重要”优先级，在这种情况下，将颜色更改为红色是有意义的。至于他们为什么选择这样或那样做，我不知道。

3 回答 3