通过JavaScript移除HTML元素样式

Question

我正在尝试替换一个元素的内联样式标签值。当前的元素看起来像这样：

`<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">`

我想删除所有的样式内容，使其通过类别而不是内联样式进行样式设置。我尝试了删除element.style; 和 element.style = null; 以及 element.style = ""; ，但都没有成功。我的当前代码在这些语句处出现错误。整个函数如下：
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");
}

clearInterval可以正常工作，但是警告框从未触发，背景保持不变。问题出在哪里？

---

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");
}

- danwoods

---

尝试使用removeAttribute("style")，但仍然没有成功。我正在使用setInterval循环更改背景颜色来（尝试）创建脉冲效果。我将尝试编写其他样式类以尝试回答4号问题。还有其他想法吗？我的当前代码如下所示... - danwoods

Answer 1

你可以直接这样做：

element.removeAttribute("style")

- cloudhead

---

或者 element.style.cssText = null，作用类似。 - mrec

@mrec 不完全相同，在您的情况下，一个元素仍然具有空的 style 属性。 - user

这回答了提问者的问题——移除所有内联样式并回退到样式表规则，但是它也会清除所有内联样式。如果你想有选择地移除内联样式中的规则，@sergio在下面的回答（实际上，davidjb对那个回答的评论）更有用。 - ericsoco

Answer 2

在 JavaScript 中：

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

在jQuery中：

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

- Sergio

---

这段代码的第一行似乎会在Internet Explorer (<9)中出现“参数无效”的错误，或者导致元素在IE >= 9中完全消失。 将“getElementById（“id”）.style.display =''”设置为空字符串似乎可以跨浏览器正常工作。 - davidjb

在jQuery中正确的删除样式的方法是 $("#id").css('display', '');。 - Oiva Eskola

这让我接近了，但它不是null，而是'none'起作用，例如$("#id").css('display','none');。 - Aaron

display:none与此问题或答案无关。它是用于隐藏元素的。 - JasonWoof

还有CSSStyleDeclaration.removeProperty()，在我看来比空赋值干净得多。请参见https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty - Sjeiti

Answer 3

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

如果你正在使用jQuery，那么

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

- Rony

---

这两个代码片段的功能完全不同。只有第一个与问题有关。 - JasonWoof

Answer 4

class属性可以包含多个样式，因此您可以将其指定为

<tr class="row-even highlight">

并对字符串进行操作，从element.className中删除'highlight'

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

使用jQuery会使这更简单，因为你有相应的方法。

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

这将使你能够轻松切换高亮显示

- gapple

---

在样式表中定义.highlight的另一个优点是，只需更改一行CSS而不进行任何Javascript更改，即可精确更改“highlight”的显示方式。如果您 未 使用JQuery，则添加和删除类仍然非常简单：/on/ theElement.className += ' highlight'; /off/ theElement.className = theElement.className.replace(/\b\s*highlight\b/, ''); （通过在CSS中定义.element，它自动保持在所有地方都是相同的。） - Chuck Kollars

哎呀，忘记了可能类被指定多次的情况。为了处理这种情况，将 'g' 标志添加到正则表达式中：theElement.className = theElement.className.replace(//b\s*highlight\b/g, ''); - Chuck Kollars

请使用classList节点属性而不是className。 - Shishir Arora

Answer 5

删除 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>

- Balaji

Answer 6

使用以下代码可以在原生JavaScript中移除特定节点的类名：

particular_node.classList.remove("<class名称>")

- Shishir Arora

Answer 7

在jQuery中，你可以使用

最初的回答

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

- Almhar

Answer 8

完全删除样式，不仅将其设置为NULL。

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

- Vitalicus