elzi elzi - 1 year ago 92
Javascript Question

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

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

to no avail. Ideas?

Answer Source


My original answer suffers because it overwrites all inline styles. A much neater solution would be to clear the background-color style using:

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

And then reset it using:

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

Or in a one-liner:

    .css('background-color', '')
    .css('background-color', 'blue');

See http://jsfiddle.net/RichardTowers/HmXXc/55/.

Original answer:

I would edit the style attribute directly

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