$(this).css not changing css values

Question

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?

Answer 1

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;");

Answer 2

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;' 
});