How can I erase all inline styles with javascript and leave only the styles specified in the css style sheet?
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?
Source: Tips4all
$('div').attr('style', '');
ReplyDeleteor
$('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.
$('div').removeAttr('style');
ReplyDeleteYou could also try listing the css in the style sheet as !important
ReplyDeleteI 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