通过javascript删除html元素样式

时间:2009-06-24 19:22:48

标签: javascript html dom styles

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

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

8 个答案:

答案 0 :(得分:156)

你可以这样做:

element.removeAttribute("style")

答案 1 :(得分:59)

在JavaScript中:

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

在jQuery中:

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

答案 2 :(得分:11)

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

如果您使用的是jQuery,那么

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

答案 3 :(得分:4)

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

<tr class="row-even highlight">

并执行字符串操作以从element.className

中删除'highlight'
element.className=element.className.replace('hightlight','');

使用jQuery可以使这更简单,因为你有方法

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

可以让您轻松切换高亮显示

答案 4 :(得分:3)

使用

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

原生javascript

答案 5 :(得分:1)

完全删除样式,不仅设置为NULL

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

答案 6 :(得分:0)

在jQuery中,您可以使用

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

答案 7 :(得分:0)

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