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    lt div style  height 300px  width 300px  background-color  ffffff   gt  lt  div gt    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

User · Accepted Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

div   removeAttr  style

User · Answer

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

User · Answer

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     remove the style attribute   element removeAttribute  style

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

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to inline