为什么这个重要的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';

Live demo: http://jsfiddle.net/4fn6h/3/

The text is green in Chrome, Safari, and IE9, but red in Firefox, and Opera. (Also, the text is black in IE7, and IE8, because the code throws an error, but let's ignore that... )

So, which browsers follow the standard here? Should it be possible to override a setProperty(...,'important') or not?

Answer 1

The spec is not clear. There are two ways to look at it:

1. it's a bug in WebKit/IE9. If you are overwriting the color value, there is no reason for the old value to stay around, important or not.
2. WebKit/IE9 are correct. The DOM interface style manipulates the style property of the element, which is considered a CSS Declaration Block . In a CSS block, a property with !important set will always take precedence over ones without. By that rule the change to 'red' should have no effect, so it's effectively ignored.

I believe the latter is the most likely explanation. Consider having a declaration like this:

p { color: red !important; }

If you add a second color rule, without !important , it has no effect:

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

The same applies to manipulating the HTML style attribute directly.

So the behavior in Chrome/Safari/IE9 is consistent with the CSS cascading rules, while FF and Opera are treating DOM style as a simple object without regard for the cascading rules, not as an interface to the CSS declarations.

http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration

---

Fun fact: webkit seems to be doing a string match for important , so this works too:

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

---

And a tip: pick a better color pair next time, you're making it hard for the color blind to help :)

Answer 2

It could be that Firefox and Opera's behavior is more appropriate.

When you issue elem.style.color = 'red'; you did not turn off the "important" priority on the color, in which case it would make sense to change the color to red. As far as why they choose to do it one way or another, I don't know.

Answer 3

Should it be possible to override a setProperty(...,'important') or not? yes it should. but you have to do it with another ele.style.setProperty call. take a look at this and you should see red in all modern browsers.

So, which browsers follow the standard here? since green is set with !important , it should not be replaced with red since red is not set with !important . that means chrome, safari and IE9 are following the standard and firefox is NOT.