CODEWITHSUNDEEP
javascriptjquerycssinternet-explorer
Jitendra Vyas
Jitendra Vyas

Reputation: 152657

How to override inline css through javascript?

can we override inline css through javascript? with IE6 compatibility.

I found this pure css solution but not works in IE.

http://nataliejost.com/override-inline-styles-from-the-stylesheet/

http://www.sitepoint.com/blogs/2009/05/27/override-inline-css/

<div class="block">
    <span style="font-weight: bold; color: red;">Hello World</span>
</div>

we can override this inline style with this solution

.block span[style]{
    font-weight: normal !important;
    color: #000 !important;
}

This solution work in all major browser except IE6.

Upvotes: 5

Views: 24383

Answers (2)

bobince
bobince

Reputation: 536379

!important does work in IE6, it's just your selector span[style] won't, as attribute selectors aren't supported there. If you can find another selector that will pick the spans you want to override, that'll work fine. Perhaps just .block span is enough?

Otherwise, yes, you can change it from JavaScript if you absolutely have to (don't you have any control over the markup?):

span.style.fontWeight= 'normal';
span.style.color= 'black';

Upvotes: 4

Guillaume Flandre
Guillaume Flandre

Reputation: 8980

Of course you can by using jQuery's css() method : http://docs.jquery.com/CSS/css#namevalue

So if for example you have the following HTML:

<p style="color:red;">A colored text</p>

You can change the color by doing the following in jQuery:

$("p").css("color","blue");

And it's going to work in IE6.

Upvotes: 13

Related Questions