Side navigation
#11173 closed bug (wontfix)
Opened January 14, 2012 02:12PM UTC
Closed January 14, 2012 04:00PM UTC
Last modified April 11, 2014 06:54AM UTC
$(elem).css("property", "value !important") fails
| Reported by: | fam.lam | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | None |
| Component: | css | Version: | 1.7.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
I'm not sure if this is a bug or intentional, but I guess it's a bug.
In the FireFox (9.0.1, and maybe earlier versions too) and future webkit browser versions, the following code doesn't work
$("body").css("color", "red !important");
If you leave out the ''!important'' it works fine.
See also: http://jsfiddle.net/GGJHL/
It could be because jQuery calls
style[ name ] = value;
and these browsers do not support setting properties containing !important that way.
The correct way to set it would be
style.setProperty(name, value_without_!important, "important");
It would be great if jQuery could also support setting !important styles on browsers that support .setProperty().
Attachments (0)
Change History (5)
Changed January 14, 2012 04:00PM UTC by comment:1
| component: | unfiled → css |
|---|---|
| priority: | undecided → low |
| resolution: | → wontfix |
| status: | new → closed |
Changed September 06, 2013 01:49PM UTC by comment:2
I like using css and jquery will solve problem
Changed October 23, 2013 06:38PM UTC by comment:3
If you're not going to fix this please update your docs:
From http://api.jquery.com/show/:
Note: If using !important in your styles, such as display: none !important, it is necessary to override the style using .css( "display", "block !important") should you wish for .show() to function correctly.
Changed November 13, 2013 07:22PM UTC by comment:4
This isn't good practice but should at least work or return an error. It simply does nothing.
Changed April 11, 2014 06:54AM UTC by comment:5
Replying to [comment:1 rwaldron]:
It's smarter to avoid adding features to the core library and instead defer to the developer and allow them to create a class that can be used instead:> > .importantRed { > color: red !important; > } > >> > $("body").addClass("importantRed"); > >
This won't work for setting a value that needs to be calculated with JS, such as the height of an element.
It's smarter to avoid adding features to the core library and instead defer to the developer and allow them to create a class that can be used instead:
.importantRed { color: red !important; }$("body").addClass("importantRed");