I have this code

$('#downvotebutton').click(function() {
    $(this).css('background-color', 'red !important');
    console.log('foo');
    //more

When downvotebutton is clicked, 'foo' is returned to the console but the background-color doesn't change. jQuery is linked to and works elsewhere in the page. what could possibly be the cause?

I have this code

$('#downvotebutton').click(function() {
    $(this).css('background-color', 'red !important');
    console.log('foo');
    //more

When downvotebutton is clicked, 'foo' is returned to the console but the background-color doesn't change. jQuery is linked to and works elsewhere in the page. what could possibly be the cause?

• javascript
• jquery
• css

• can you create a jsFiddle that demonstrates the issue? – Mgetz Commented Feb 27, 2014 at 13:45
• do you want to change the background of the button or the body or some div? – Mukesh Soni Commented Feb 27, 2014 at 13:45
• i want to change background-color of the button, which is a div – user3324865 Commented Feb 27, 2014 at 13:46
• jsfiddle/Hjea4/1 – Trace Commented Feb 27, 2014 at 13:48
• Their might be a condition that this is not pointing your target element. – Mayank Tripathi Commented Feb 27, 2014 at 13:49

6 Answers 6

Do you really need !important? Following will work:

$(this).css('background-color', 'red');

Or if you need !important:

$(this).css("cssText", "background-color: red !important;");

You cannot use !important statement using jQuery css() method.

You could use:

$(this).attr('style', function(_, rules) { 
     var newval = rules?rules:"";return newval + ';background-color: red !important;' 
});

You can use attr() instead since css() cannot set !important property:

$('#downvotebutton').click(function() {
    $(this).attr('style', 'background-color: red !important');
    console.log('foo');
});

Fiddle Demo

try this..

$(docuemnt).ready(function(){
$('#downvotebutton').click(function() {
    $(this).css('background-color', 'red');
    console.log('color changed');
});
});

Use a class instead. .css doesn't support !important.

http://bugs.jquery./ticket/11173

Actually you can use !important with the .css() method.

cssText allows you to pass over a 3rd arguement, in this case !important

$('#downvotebutton').css("cssText", "background-color: red !important;");

Hope this helps!