如何忽略CSS类的宽度并通过代码将其设置为！important

Question

I have a div with width as 50% added as a class,

In document ready I am doing this,

$("#id").width('100%');

But the rule is being ignored.

How can i make my code one must use?

Answer 1

Try using jQuery's .css() function ( JSFiddle example ):

$("#id").css("width", "100%");

If you really want to set it as !important :

$("#id").css("width", "100% !important");

Answer 2

esqew is correct, but this is usually a "bad" way to fix things. "usually", you're better off using css inheritance and avoiding "!important" statements ( let alone dynamic !important statements).

See How to access an element within an element in css? for some info on someone trying to achieve a similar thing.

Expanding on esqew's fiddle, you could do this: http://jsfiddle.net/rHYc4/2/

#outer-div #id { width: 100%; }

1. If the CSS you are trying to change already has "!important" on it, you will need to use !important to override it.
2. If the CSS you are trying to override does not have !important, you should use a more specific selector to change it.
3. If it still doesn't change after both approaches, you can just remove the width $('#id').css("width",""); and then do whatever you like!

post-comment edit

if you are seeing something like <div id='id' width='100%'>blah blah</div> you would use jQuery's attr to get rid of it: $('#id').removeAttr('width',''); to kill it or $('#id').attr('width','100%'); to set it.

See http://api.jquery.com/attr/ and http://api.jquery.com/removeattr/

Answer 3

Since you mentioned you're setting the width with a class, keep it in the CSS and avoid manipulating the width in the JS. Instead, use another class, like such:

#id {width: 50%}
#id.new-class {width: 100%}

Then in document ready

$("#id").addClass("new-class");