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.

Deleted the [solved] behind the title, on SO questions are never finally solved, there can always be a better alternative or a noteworthy variant. SO is a wiki after all. — markus
– markus, Commented Nov 20, 2009 at 9:47

Guillaume Flandre · Accepted Answer · 2009-11-20 09:44:46Z

13

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.

edited Nov 20, 2009 at 9:44

answered Nov 20, 2009 at 9:39

Guillaume Flandre

9,0008 gold badges48 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jitendra Vyas Over a year ago

and is there any pure css solution to do this

David Hellsing Over a year ago

jQuerys css() actually adds inline CSS in the DOM. Doing it the other way around, overriding jQuerys css() with css is more difficult (it works using !important, but not in IE6)

Russ Cam Over a year ago

Do you want to make the change at runtime or in the file? In the file, simply use the style attribute, otherwise at runtime you'll need to use a client-side scripting language.

Guillaume Flandre Over a year ago

I'm not sure what you're asking but in the case of my example, you could try: p {color: blue !important;} in a css file.

David Hellsing Over a year ago

@Jitendra: the pure CSS solution is to add !important, but as said before, IE6 doesnt follow. Read more about CSS inheritance at w3c.

|

bobince · Accepted Answer · 2009-11-20 13:37:27Z

4

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

answered Nov 20, 2009 at 13:37

bobince

538k111 gold badges675 silver badges846 bronze badges

Collectives™ on Stack Overflow

How to override inline css through javascript?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related