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

Question

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?

Solution 1

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

Solution 2

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.

Solution 3

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

Solution 4

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];

2. remove the style attribute

element.removeAttribute('style');

Solution 5

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.

View more solutions

Comments

[Matt]

Is this more efficient than doing attr('style', '')?

[andres descalzo]

with $('div').attr('style', ''); <div style=""></div> with $('div').removeAttr('style'); <div></div> is more clean

[rpiaggio]

probably, because it isn't setting it to a null value, but either way you are going to get a large processing time because it has to go through every div in the body.

[andres descalzo]

yes, that's clear, it should be changed to an ID $("#id") or a class $ (".classDivs)

[Jose Faeti]

If it has to remove the style attribute, it will also have to look for it, so the last solution seems like only making the code dirtier imho. The best of course would be to only select the elements you need to have the style removed, via ID possibly.

[joshvermaire]

while this would work, it is terrible practice to just override inline styles with !important in order to remove them

[streetlight]

This will only target divs. What if you want to target everything?

[Tom Davies]

As a related aside, calling .css() with an empty string as the second value will remove just the named value from inline styles, eg $('div').css('display', ''); will remove just the inline display property (if set).

[Makaze]

@streetlight Use $('*').removeAttr('style') to target everything.

[Admin]

An alternative to Array.prototype.forEach.call is the fairly well-supported splat operator, which saves a line: [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')).

[Bilal Akil]

A similar logic seems to apply if trying to "empty" only a single style property for an element: element.style.display = null; - that's what I needed :D

[Admin]

No, actually the second one should be a bit faster because if JQuery has any sense then it will be using the standard removeattribute. Also, your forgetting the massive inefficient overhead of looping though more DOM elements which makes the second method even faster than the first.