How to override inline css through javascript?

Question

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.

Answer 1

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.

Answer 2

!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';