program tip

자바 스크립트를 통해 HTML 요소 스타일 제거

radiobox 2020. 9. 23. 07:29
반응형

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

and do string manipulation to remove 'highlight' from element.className

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

Using jQuery would make this simpler as you have the methods

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

that would enable you to toggle highlighting easily


Use

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

For native javascript


In jQuery, you can use

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

참고URL : https://stackoverflow.com/questions/1040402/removing-html-element-styles-via-javascript

반응형