web-dev-qa-db-ja.com

JavaScriptを介してHTML要素スタイルを削除する

要素のインラインスタイルタグ値を置き換えようとしています。現在の要素は次のようになります。

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

あなたはただすることができます：

element.removeAttribute("style")
161
cloudhead

JavaScriptの場合：

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

JQueryの場合：

$("#id").css('display',null);
62
Sergio
getElementById("id").removeAttribute("style");

あなたがjQueryを使用している場合

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

クラス属性には複数のスタイルを含めることができるため、次のように指定できます。

<tr class="row-even highlight">

element.classNameから「ハイライト」を削除する文字列操作を行います

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

メソッドがあるので、jQueryを使用するとこれが簡単になります。

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

強調表示を簡単に切り替えることができます

4
gapple

つかいます

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

ネイティブjavascriptの場合

3
Shishir Arora

JQueryでは、次を使用できます。

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