We am having trouble applying a style that is !important. I’ve tried:
This does nothing; no width style whatsoever is applied. Is there a jQuery-ish way of applying such a style without having to overwrite cssText (which would mean I’d need to parse it first, etc.)?
We think I've found a real solution. I've made it into a new function:
jQuery.style(name, value, priority);
We can use it to get values with .style('name') just like .css('name'), get the CSSStyleDeclaration with .style(), and also set values - with the ability to specify the priority as 'important'. See
Here's the output:
See this CSSStyleDeclaration for examples of how to read and set the CSS values. My issue was that we had already set !important for the width in my CSS to avoid conflicts with other theme CSS, but any changes WE made to the width in jQuery would be unaffected since they would be added to the style attribute.
For setting with the priority using the setProperty function, This Article ljdpsdnb says there is support for IE 9+ and all other browsers. WE have tried with IE 8 and it has failed, which is why WE built support for it in my functions (see above). It will work on all other browsers using setProperty, but it will need my custom code to work in < IE 9.
The problem is caused by jQuery not understanding the !important attribute, and as such fails to apply the rule.
We might be able to work around that problem, and apply the rule by referring to it, via addClass():
Or by using attr():
The latter approach would unset any previously set in-line style rules, though. So use with care.
Of course, there's a good argument that @Nick Craver's method is easier/wiser.
The above, attr() approach modified slightly to preserve the original style string/properties:
We can set the width directly using .width() like this:
Updated for comments: We have this option as well, but it'll replace all css on the element, so not sure it's any more viable:
After reading other answers and experimenting, this is what works for me: