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?
- 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
3 Answers
Reset to default 2The spec is not clear. There are two ways to look at it:
- 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. - WebKit/IE9 are correct. The DOM interface
style
manipulates thestyle
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.