How can I erase all inline styles with javascript and leave only the styles specified in the css style sheet?

Thursday, April 5, 2012

If I have the following in my html:




<div style="height:300px; width:300px; background-color:#ffffff;"></div>

And this in my css style sheet:




div {

    width:100px;

    height:100px;

    background-color:#000000;

}

Is there any way, with javascript/jquery, to remove all of the inline styles and leave only the styles specified by the css style sheet?

UserApril 5, 2012 at 12:35 AM
$('div').attr('style', '');

or

$('div').removeAttr('style'); (From Andres's Answer)

To make this a little smaller, try this:

$('div[style]').removeAttr('style');

This should speed it up a little because it checks that the divs have the style attribute.

Either way, this might take a little while to process if you have a large amount of divs, so you might want to consider other methods than javascript.
ReplyDelete
Replies
UserApril 5, 2012 at 12:35 AM
$('div').removeAttr('style');
ReplyDelete
Replies
UserApril 5, 2012 at 12:35 AM
You could also try listing the css in the style sheet as !important
ReplyDelete
Replies
UserApril 5, 2012 at 12:35 AM
I was using the $('div').attr('style', ''); technicque, and it wasn't working in IE8. I alerted the style attribute and it was not stripping out inline styles. .removeAttr ended up doing the trick in IE8.
ReplyDelete
Replies