通过javascript删除html元素样式

Posted 2023-02-22

【中文标题】通过javascript删除html元素样式

【英文标题】：removing html element styles via javascript

【发布时间】：2010-11-05 15:20:58

【问题描述】：

我正在尝试替换元素的内联样式标记值。当前元素如下所示：

`<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 = "";无济于事。我当前的代码在这些语句中中断。整个函数看起来像： 函数 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\d4/))

    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\d4/))

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

【问题讨论】：

试过 removeAttribute("style")，还是不行。我正在使用 setInterval 循环显示背景颜色以（尝试）创建脉冲效果。我将尝试编写一些其他样式类来尝试回答 4。还有其他想法吗？我当前的代码发布在下面...

如果你能接受this作为这个问题的正确答案，那就太好了

^但这不是正确的答案。

【参考方案1】：

你可以这样做：

element.removeAttribute("style")

【讨论】：

或element.style.cssText = null，其作用大致相同。

@mrec 不完全相同，在您的情况下，元素仍然有空的 style 属性

这回答了 OP 的问题——删除所有内联样式并回退到样式表规则，但是......它也吹走了所有内联样式。如果您想有选择地从内联样式中删除规则，@sergio 下面的答案（实际上，davidjb 对该答案的评论）更有用。

【参考方案2】：

在 javascript 中：

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

在 jQuery 中：

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

【讨论】：

第一行代码在 Internet Explorer (Invalid argument 或导致元素在 IE >= 9 中完全消失。设置 getElementById("id").style.display = ''，为空字符串，似乎可以跨浏览器工作。

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

这让我很接近，但它不是空的，而是“无”的，例如$("#id").css('display','none');

display:none 与此问题或答案无关。那是为了隐藏元素。

还有CSSStyleDeclaration.removeProperty()，恕我直言，它比空赋值要干净得多。见developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/…

【参考方案3】：

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

如果你使用的是 jQuery，那么

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

【讨论】：

这两个代码 sn-ps 做了完全不同的事情。只有第一个与问题有关。

【参考方案4】：

class 属性可以包含多种样式，所以可以指定为

<tr class="row-even highlight">

并进行字符串操作以从 element.className 中删除“highlight”

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

---

使用 jQuery 会更简单，因为你有方法

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

这将使您能够轻松切换突出显示

【讨论】：

在样式表中定义 .highlight 的另一个好处是，您可以通过更改一行 CSS 而完全不更改任何 Javascript 来准确更改“highlight”的显示方式。如果您不使用 JQuery，添加和删除类仍然非常简单： /*on*/ theElement.className += 'highlight'; /*off*/ theElement.className = theElement.className.replace(/\b\s*highlight\b/, ''); （通过在 CSS 中定义 .element，它也会自动在任何地方保持 same。）

糟糕，忘记了多次指定可能性类。要处理这种情况，请在正则表达式中添加 'g' 标志：theElement.className = theElement.className.replace(/\/b\s*highlight\b/g, '');

使用类列表节点属性而不是类名

【参考方案5】：

使用

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

对于原生 javascript

【参考方案6】：

在jQuery中，你可以使用

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

【参考方案7】：

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

【参考方案8】：

完全删除样式，不只设置为NULL

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