javascript - Why is this !important CSS value overridden? - Stack Overflow

admin管理员组

文章数量:1324111

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: /

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?

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/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?

• javascript
• css

Share Improve this question Follow asked May 22, 2012 at 20:08 Šime VidasŠime Vidas 186k6565 gold badges288288 silver badges391391 bronze badges 30

• 1 Sure seems to me like Firefox's behavior would be preferred. A property can't have two values, right? – cliffs of insanity Commented May 22, 2012 at 20:24
• 1 @cliffsofinsanity But the problem is: which style should take effect, the one that was assigned last or the one with the highest priority? – Evan Mulawski Commented May 22, 2012 at 20:29
• 5 ...in any case, it doesn't seem like a reasonable approach to make "important" such that it's current value is more important than a future value on the same element. Seems that "important" should only affect cascading. – cliffs of insanity Commented May 22, 2012 at 20:35
• 2 So Chrome won't let you revert importance once set. Well that's just great... Firefox should be blue, because the local "important" on the element has been set to null, and the stylesheet one now takes priority. – cliffs of insanity Commented May 22, 2012 at 20:48
• 2 Except that an "!important" in a stylesheet overrides the inline style. I assume that's the reason for having "important" available directly on the element. ...wait, maybe I'm misunderstanding again. – cliffs of insanity Commented May 22, 2012 at 21:13

 |  Show 25 more ments

3 Answers 3

Sorted by: Reset to default 2

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/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 :)

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.

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.

本文标签： javascriptWhy is this important CSS value overriddenStack Overflow