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.