change background color of div with jquery that has an !important tag

Question

Using a plugin that calls a .jsp that uses its own stylesheet hosted externally (it's a yelp embed - trying to manipulate the look of it). The one element I'm trying to change has an !important tag on it, and I can't seem to change it...

I tried

<script type="text/javascript">
   $('.elementToChange').css({'background-color':'black'});​
</script>

to no avail. Ideas?

Answer 1

It looks like in more up-to-date versions of jQuery (at least 1.7.2 and higher) you can simply set the css:

$('#elementToChange').css('background-color', 'blue');

See http://jsfiddle.net/HmXXc/185/

In older versions of jQuery and Zepto you had to clear the css first:

// Clear the !important css
$('#elementToChange').css('background-color', '');

And then reset it using:

$('#elementToChange').css('background-color', 'blue');

Or in a one-liner:

$('#elementToChange')
    .css('background-color', '')
    .css('background-color', 'blue');

See http://jsfiddle.net/HmXXc/186/.

Original answer:

Note: this may be a bad idea, as it will remove any other inline styles

I would edit the style attribute directly

$('.elementToChange').attr('style', 'background-color: blue !important');

http://jsfiddle.net/RichardTowers/3wemT/1/