Removing HTML element styles via JavaScript

Question

I'm trying to replace an element's inline style tag value. The current element looks like this:

`<tr class="row-even" style="background: red none repeat scroll 0% 0%; position: relative; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" id="0000ph2009-06-10s1s02">`

and I'd like to remove all that style stuff so that it's styled by it's class rather than it's inline style. I've tried delete element.style; and element.style = null; and element.style = ""; to no avail. My current code breaks at these statement. The whole function looks like:
function unSetHighlight(index){

if(index < 10)
index = "000" + (index);
else if (index < 100)
  index = "000" + (index);
  else if(index < 1000)
    index = "0" + (index);
    if(index >= 1000)
      index = index;
    
var mainElm = document.getElementById('active_playlist');
var elmIndex = "";

for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){
  if(currElm.nodeType === 1){

  var elementId = currElm.getAttribute("id");

  if(elementId.match(/\b\d{4}/)){
    
    elmIndex = elementId.substr(0,4);
    
            
    if(elmIndex == index){
      var that = currElm;
      //that.style.background = position: relative;
      }
    }
  }
}
       
clearInterval(highlight);
alert("cleared Interval");
that.style.background = null;

alert("unSet highlight called");
}

the clearInterval works but the alert never fires and the background stays the same. What's the problem?

function unSetHighlight(index){  
  alert(index);  
  if(index < 10)  
    index = "000" + (index);  
    else if (index < 100)  
      index = "000" + (index);  
      else if(index < 1000)  
        index = "0" + (index);  
        if(index >= 1000)  
          index = index;  
        
    var mainElm = document.getElementById('active_playlist');
    var elmIndex = "";
  
    for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){
      if(currElm.nodeType === 1){

      var elementId = currElm.getAttribute("id");

      if(elementId.match(/\b\d{4}/)){
        
        elmIndex = elementId.substr(0,4);
        alert("elmIndex = " + elmIndex + "index = " + index);
        
                
        if(elmIndex === index){
          var that = currElm;
          alert("match found");
          }
        }
      }
    }
        
    clearInterval(highlight);
    alert("cleared Interval");
    that.removeAttribute("style");
    
    //that.style.position = "relative";
    //reColor();
    alert("unSet highlight called");
}

Tried removeAttribute("style"), still no luck. I'm using setInterval to cycle through background colors to (try to) create a pulse effect. I'll try writing up some other style classes to try answer 4. Any other ideas? My current code is posted below... — danwoods
– danwoods, Commented Jun 24, 2009 at 20:53

Code Guru · Accepted Answer · 2018-04-27 07:03:06Z

200

you can just do:

element.removeAttribute("style")

edited Apr 27, 2018 at 7:03

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

answered Jun 24, 2009 at 19:28

cloudhead

15.4k7 gold badges44 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mrec Over a year ago

Or element.style.cssText = null, which does much the same.

user Over a year ago

@mrec not exactly the same, in your case an element still has empty style attribute

ericsoco Over a year ago

This answers the OP's question -- remove all inline style and fallback to stylesheet rules, but...it also blows away all the inline styles. If you want to selectively remove rules from the inline styles, @sergio's answer below (actually, davidjb's comment on that answer) is more useful.

ObiHill · Accepted Answer · 2017-05-23 16:43:44Z

77

In JavaScript:

document.getElementById("id").style.display = null;

In jQuery:

$("#id").css('display',null);

edited May 23, 2017 at 16:43

ObiHill

12k25 gold badges93 silver badges142 bronze badges

answered Feb 9, 2014 at 18:19

Sergio

1,0438 silver badges8 bronze badges

5 Comments

davidjb Over a year ago

The first line of code appears to either error in Internet Explorer (<9) with Invalid argument or cause the element to disappear entirely in IE >= 9. Setting getElementById("id").style.display = '', being the empty string, appears to work across browsers.

Oiva Eskola Over a year ago

in jQuery the correct way to remove a style is $("#id").css('display', '');

Aaron Over a year ago

This got me close, but it wasn't null, but 'none' that worked, e.g. $("#id").css('display','none');

JasonWoof Over a year ago

display:none has nothing to do with this question or answer. That's for hiding elements.

Sjeiti Over a year ago

There is also CSSStyleDeclaration.removeProperty() which imho is a lot cleaner than a null assignment. See developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/…

Rony · Accepted Answer · 2009-06-24 19:31:34Z

12

getElementById("id").removeAttribute("style");

if you are using jQuery then

$("#id").removeClass("classname");

answered Jun 24, 2009 at 19:31

Rony

9,5392 gold badges24 silver badges22 bronze badges

1 Comment

JasonWoof Over a year ago

Those two code snippets do wildly different things. Only the first has anything to do with the question.

gapple · Accepted Answer · 2009-06-24 19:58:13Z

5

The class attribute can contain multiple styles, so you could specify it as

<tr class="row-even highlight">

and do string manipulation to remove 'highlight' from element.className

element.className=element.className.replace('hightlight','');

Using jQuery would make this simpler as you have the methods

$("#id").addClass("highlight");
$("#id").removeClass("hightlight");

that would enable you to toggle highlighting easily

answered Jun 24, 2009 at 19:58

gapple

3,49324 silver badges27 bronze badges

3 Comments

Chuck Kollars Over a year ago

Another advantage of defining .highlight in your style sheet is you can change exactly how a "highlight" is displayed by just changing one line of CSS and not making any Javascript changes at all. If you're not using JQuery, adding and removing a class is still pretty simple: /*on*/ theElement.className += ' highlight'; /*off*/ theElement.className = theElement.className.replace(/\b\s*highlight\b/, ''); (By defining .element in CSS, it automatically stays the same everywhere, too.)

Chuck Kollars Over a year ago

Oops, forgot possibility class is specified more than once. To handle that case too, add 'g' flag to the regular expression: theElement.className = theElement.className.replace(/\/b\s*highlight\b/g, '');

Shishir Arora Over a year ago

use classlist node property instead of className

Penny Liu · Accepted Answer · 2023-07-06 06:32:33Z

5

Remove removeProperty

var el = document.getElementById("id");
el.style.removeProperty('display')

console.log("display removed" + el.style["display"])
console.log("color " + el.style["color"])

<div id="id" style="display:block;color:red">s</div>

edited Jul 6, 2023 at 6:32

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Sep 6, 2020 at 11:10

Balaji

11.2k5 gold badges61 silver badges53 bronze badges

Comments

Kalamarico · Accepted Answer · 2017-10-04 11:55:52Z

4

Use

particular_node.classList.remove("<name-of-class>")

For native javascript

edited Oct 4, 2017 at 11:55

Kalamarico

5,71622 gold badges57 silver badges74 bronze badges

answered Apr 20, 2016 at 0:12

Shishir Arora

5,9934 gold badges33 silver badges36 bronze badges

Comments

Almhar · Accepted Answer · 2019-06-18 11:35:17Z

2

In jQuery, you can use

$(".className").attr("style","");

answered Jun 18, 2019 at 11:35

Almhar

211 bronze badge

Comments

Vitalicus · Accepted Answer · 2020-03-17 23:28:54Z

2

Completly removing style, not only set to NULL

document.getElementById("id").removeAttribute("style")

answered Mar 17, 2020 at 23:28

Vitalicus

1,41818 silver badges18 bronze badges

Collectives™ on Stack Overflow

Removing HTML element styles via JavaScript

8 Answers 8

3 Comments

5 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

5 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related