자바 스크립트를 통해 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");
}

당신은 할 수 있습니다 :

element.removeAttribute("style")

JavaScript에서 :

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

jQuery에서 :

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

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

jQuery를 사용하는 경우

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

클래스 속성은 여러 스타일을 포함 할 수 있으므로 다음과 같이 지정할 수 있습니다.

<tr class="row-even highlight">

element.className에서 'highlight'를 제거하는 문자열 조작을 수행하십시오.

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

jQuery를 사용하면 메소드가 있으므로 이것을 더 간단하게 만들 수 있습니다.

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

강조 표시를 쉽게 전환 할 수 있습니다.

사용하다

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

네이티브 자바 스크립트의 경우

jQuery에서 다음을 사용할 수 있습니다.

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

NULL로 설정하는 것뿐만 아니라 스타일을 완전히 제거

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

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>