Why does setting a CSS property with the ! attribute not work in the . css() method?

Question

I would like to know the real reason for the disability that the function jQuery.css() has, which would be the fact that when using the attribute !important in any assigned CSS property, the same is not added.

I would also like to know if there is any functional means of using the attribute !important in the method .css()

Obs: I am speaking only and exclusively of the method .css() and not any other existing method to assign CSS.

Answer 1

Yes it does! Only with a variant:

.css("cssText", "color: green !important;")

Example

To add more properties just add in the same string:

.css("cssText", "color: green !important; font-size:50px;")
                 ^                        ^

This variant is the only way using .css() as the question asks. Note that this way CSS is reiniciado, so any CSS that has been closed outside the stylesheet get lost, as he rightly said @bfavaretto.

Includes CSS defined in the element as <div style="font-style:italic;">.

The correct way is to use javascript as reference in another question, using: setProperty('color', 'green ', 'important');

Answer 2

The "real reason", I can’t say, we would have to ask John Resig, creator of jQuery. It may have to do with browser compatibility, performance, or the library’s own history (it was implemented in such a way that it would be costly to change now). If I were to kick, I’d kick as the main reason compatibility - guess which browser?

What I can explain is as this really works on jQuery. But before:

How to define a style !important with pure Javascript?

In the browser I’m in now (Chrome), only three ways work:

el.setAttribute('style', 'color: green !important');
// ou
el.style.cssText = 'color: green !important';
// ou
el.style.setProperty('color', 'green', 'important');

// NÃO FUNCIONAM:
// el.style.color = 'green !important';
// el.style['color'] = 'green !important';
// el.style = 'color: green !important';

The first option overrides the attribute style of the element, as if you had defined style="..." in HTML itself. This also instructs the browser to reprocess the style of that element.

The second and third options work by modifying a property or calling a style object method, which is an object of type CSSStyleDeclaration. That interface was defined in the CSS 2.1 specification (today is part of the drafts of the CSSOM). In fact, IE only supports this starting with version 9, which makes me suspect compatibility as a major reason why jQuery does not support attribution of !important.

The second option, el.style.cssText, is equivalent to the first, and overwrites the whole style element. The third option, el.style.setProperty, is more selective, and operates upon a specific property of the object style, whose name should be passed as the first argument. It is the "correct" way (from the specification point of view) to define the !important, as it has a third parameter Priority exactly for this.

And how the .css jQuery really does work?

When you call $('seletor').css('color', 'green'), jQuery first loops all elements that match the selector. In this case .css is invoked as Setter, he calls the internal method jQuery.style for each element, passing the element as the first parameter, the property as the second, and the value as the third. This method makes some normalizations (as add px value if numerical), and in the end does something equivalent to this:

el.style[prop] = value;

Note that this is one of the formats that do not work to define !important. And that’s why it’s no use going through !important in the value used with .css. That also explains why Sergio’s suggestion works: .css("cssText", "color: green !important;") amounts to el.style['cssText'] = 'color: green !important;', which is the variation of the second pure JS version I mentioned (but accessing the property with brackets instead of dot).