98

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?

Matt
  • 5,547
  • 23
  • 82
  • 121

7 Answers7

170

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

Community
  • 1
  • 1
Tyler Carter
  • 60,743
  • 20
  • 130
  • 150
  • 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. – Jose Faeti Aug 03 '11 at 13:15
  • This will only target divs. What if you want to target everything? – streetlight May 17 '13 at 19:23
  • 1
    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). – Tom Davies Sep 27 '13 at 14:32
  • 2
    @streetlight Use `$('*').removeAttr('style')` to target everything. – Makaze Dec 20 '14 at 22:34
  • 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. –  May 11 '17 at 19:53
41

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.

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • 1
    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'))`. –  Mar 07 '16 at 05:22
23
$('div').removeAttr('style');
andres descalzo
  • 14,887
  • 13
  • 64
  • 115
3

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');

JRulle
  • 7,448
  • 6
  • 39
  • 61
3

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

Tushar Shukla
  • 5,666
  • 2
  • 27
  • 41
  • 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 – Bilal Akil Nov 12 '16 at 23:08
3

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.

jenzz
  • 7,239
  • 6
  • 49
  • 69
rtvenge
  • 61
  • 1
  • 4
-2

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

BoringCode
  • 108
  • 4
  • 3
    while this would work, it is terrible practice to just override inline styles with !important in order to remove them – joshvermaire Dec 07 '11 at 00:59