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?


solution

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.