Jquery css: applying !important styles

Question

I am having trouble applying a style that is !important. Ive tried:

$("#elem").css("width", "100px !important");

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 id need to parse it first etc)

Edit: i should add that i have a stylesheet with an !important style that i am trying to override with an !important style inline, so using .width() and the like does not work since it gets overrridden by my external !important style.

Also, the value that will override the previous thing is computed, so i cannot simply create another external style.

Answer 1

You can set the width directly using .width() like this:

$("#elem").width(100);

Updated for comments: You have this option as well, but it'll replace all css on the element, so not sure it's any more viable:

$('#elem').css('cssText', 'width: 100px !important');

Answer 2

The problem is caused by jQuery not understanding the !important attribute, and as such fails to apply the rule.

You might be able to work around that problem, and apply the rule by referring to it, via addClass():

.importantRule { width: 100px !important; }

$('#elem').addClass('importantRule');

Or by using attr():

$('#elem').attr('style', '"width: 100px !important"');

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.

Answer 3

I would assume you tried it without adding important?
inline css (which is how js adds styling) overrides stylesheet css. I'm pretty sure that's the case even when the stylesheet css rule has !important.

Another question (maybe a stupid question but must be asked.): is the element you are trying to work on, is it display:block; or display:inline-block; ?

not knowing your expertise in CSS.. inline elements don't always behave as you would expect.

Answer 4

If it is not so relevant and since you're dealing with one element which is #elem, you can change its id to something else and style it as you wish...

$('#elem').attr('id','cheaterId');

and in your css:

#cheaterId { width: 100px;}

hope this helps, Sinan.