CODEWITHSUNDEEP
javascriptjquerycssinline
Matt
Matt

Reputation: 5595

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?

Upvotes: 99

Views: 119824

Answers (7)

Tushar Shukla
Tushar Shukla

Reputation: 6615

If you need to just empty the style of an element then:
element.style.cssText = null;
This should do good. Hope it helps!

Upvotes: 4

JRulle
JRulle

Reputation: 7568

This can be accomplished in two steps:

1: select the element you want to change by either tagname, id, class etc.

var element = document.getElementsByTagName('h2')[0];

  1. remove the style attribute

element.removeAttribute('style');

Upvotes: 3

Josh Crozier
Josh Crozier

Reputation: 240928

Plain JavaScript:

You don't need jQuery to do something trivial like this. Just use the .removeAttribute() method.

Assuming you are just targeting a single element, you can easily use the following: (example)

document.querySelector('#target').removeAttribute('style');

If you are targeting multiple elements, just loop through the selected collection of elements: (example)

var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
    element.removeAttribute('style');
});

Array.prototype.forEach() - IE9 and above / .querySelectorAll() - IE 8 (partial) IE9 and above.

Upvotes: 42

rtvenge
rtvenge

Reputation: 61

I was using the $('div').attr('style', ''); technique and it wasn't working in IE8.

I outputted the style attribute using alert() and it was not stripping out inline styles.

.removeAttr ended up doing the trick in IE8.

Upvotes: 3

BoringCode
BoringCode

Reputation: 108

You could also try listing the css in the style sheet as !important

Upvotes: -2

Tyler Carter
Tyler Carter

Reputation: 61567

$('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.

Upvotes: 170

andres descalzo
andres descalzo

Reputation: 14967

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

Upvotes: 23

Related Questions