How to override inline css through javascript?


Tags: javascript,jquery,css,internet-explorer

Problem :

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.



Solution :

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.


    CSS Howto..

    How to stop this parent element from being affected on hover?

    How to select multiple items using mouse click?

    How to make whole table cell clickable but vertical align text inside it - CSS

    How to align a button inside a DIV

    How to center the navigation on a drop down menu?

    How to add html classes to a Django template 'for-loop' dynamically?

    How can one change the background image of a label using css with javascript

    How to change scrollbar css at runtime with javascript?

    How to change CSS style of div after onclick method

    How to vertically center multiline text with an image on its left?

    How to allow content area to be expandable to right but not pop under sidebar?

    How to link assets which are inside of module in Laravel?

    how to make target link work giving different css properities

    How can I place HTML in a JavaScript string and have it validate?

    how you can change the style of the page without changing CSS files?

    How to deselect with CSS?

    How can I align the checkboxes in a form when using table display with CSS?

    How to convert list of buttons to radio buttons based on row overflow?

    How to style using nth-of-type within a ul tag?

    How to copy only referenced .css to dest with gulp?

    How can I create a full height responsive horizontal scrolling list of images with CSS

    How to apply an inner stroke to an image with just CSS?

    how to make a double hover effect with css

    How to remove dotted border around active hyperlinks in IE8 with CSS

    How do I do the css for this?

    How do I divide all margins but last to even out space?

    How can I make a DIV element Fixed but non-Scaleable?

    How do I import 2 different files icons?

    How to set MenuItem to corrent width in asp.net

    how to change size of the element using css?