$(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?

can you create a [jsFiddle](http://jsfiddle.net/) that demonstrates the issue? — Mgetz, Feb 27 '14 at 13:45
do you want to change the background of the button or the body or some div? — Mukesh Soni, Feb 27 '14 at 13:45
i want to change background-color of the button, which is a div — user3324865, Feb 27 '14 at 13:46
Their might be a condition that this is not pointing your target element. — Mayank Tripathi, Feb 27 '14 at 13:49
Please see: http://stackoverflow.com/questions/2655925/apply-important-css-style-using-jquery — FooBar, Feb 27 '14 at 13:49

score 7 · Accepted Answer · answered Feb 27 '14 at 13:49

7

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

answered Feb 27 '14 at 13:49

Sergio

6,900
5
31
55

A. Wolff · Answer 2 · 2014-02-27T14:04:56.337

3

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

edited Feb 27 '14 at 14:04

answered Feb 27 '14 at 13:46

A. Wolff

74,033
9
94
155

score 2 · Answer 3 · answered Feb 27 '14 at 13:48

2

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

answered Feb 27 '14 at 13:48

Felix

37,892
8
43
55

This solved the problem. I'm still puzzled over why $(this).css() didn't work though – user3324865 Feb 27 '14 at 13:49
@user3324865 it works, but other way, check my answer – Sergio Feb 27 '14 at 13:52
You can set important with the css method, see my answer. – heymega Feb 27 '14 at 14:01

score 1 · Answer 4 · answered Feb 27 '14 at 13:48

1

try this..

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

answered Feb 27 '14 at 13:48

kamesh

2,374
3
25
33

score 1 · Answer 5 · answered Feb 27 '14 at 13:49

1

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

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

answered Feb 27 '14 at 13:49

mbcrute

1,117
1
11
19

score 1 · Answer 6 · answered Feb 27 '14 at 14:00

1

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!

answered Feb 27 '14 at 14:00

heymega

9,215
8
42
61

$(this).css not changing css values

6 Answers6