자바 스크립트를 사용하여 CSS 속성을 제거하는 방법?

JavaScript를 사용하여 요소의 CSS 속성을 제거 할 수 있습니까? 예를 들어 div.style.zoom = 1.2JavaScript를 통해 확대 / 축소 속성을 제거하고 싶습니다.

두 가지 옵션이 있습니다.

옵션 1:

removeProperty 메소드 를 사용할 수 있습니다 . 요소에서 스타일을 제거합니다.

el.style.removeProperty('zoom');

옵션 2 :

기본값으로 설정할 수 있습니다.

el.style.zoom = "";

효과적인 확대 / 축소는 이제 스타일 시트에 설정된 정의 (링크 및 스타일 태그를 통해)에 따라 달라집니다. 따라서이 구문은이 요소의 로컬 스타일 만 수정합니다.

removeProperty 는 요소에서 스타일을 제거합니다.

예:

div.style.removeProperty ( 'zoom');

MDN 설명서 페이지 :
CSSStyleDeclaration.removeProperty

div.style.removeProperty('zoom');

styleSheets 객체를 사용할 수 있습니다.

document.styleSheets[0].cssRules[0].style.removeProperty("zoom");

주의 사항 # 1 : 스타일 시트의 색인과 규칙의 색인을 알아야합니다.

주의 사항 # 2 :이 객체는 브라우저에 의해 일관되지 않게 구현됩니다. 하나에서 작동하는 것이 다른 것에서는 작동하지 않을 수 있습니다.

element.style.height = null;

산출:

<div style="height:100px;"> 
// results: 
<div style="">

이 클래스가있는 모든 요소를 ​​찾고 "zoom"속성을 "nothing"으로 설정해보십시오.

jQuery 자바 스크립트 라이브러리를 사용하는 경우 $(".the_required_class").css("zoom","")

편집 : 의견과 다른 답변에서 지적 했듯이이 진술이 사실이 아닌 것으로 판명되어 2010 년부터 실제로 가능해졌습니다.

False : JavaScript에서 스타일 시트를 수정하는 일반적으로 알려진 방법은 없습니다.

jQuery에서 다음을 수행 하여이 작업을 수행 할 수도 있습니다 $(selector).css("zoom", "")

이것은 트릭을 수행해야합니다-확대를 위해 인라인 스타일을 보통으로 설정하십시오.

$ ( 'div'). attr ( "style", "zoom : normal;");

실제로, 당신이 이미 그 재산을 알고 있다면, 그렇게 할 것입니다 ...

예를 들면 다음과 같습니다.

<a href="test.html" style="color:white;zoom:1.2" id="MyLink"></a>

    var txt = "";
    txt = getStyle(InterTabLink);
    setStyle(InterTabLink, txt.replace("zoom\:1\.2\;","");

    function setStyle(element, styleText){
        if(element.style.setAttribute)
            element.style.setAttribute("cssText", styleText );
        else
            element.setAttribute("style", styleText );
    }

    /* getStyle function */
    function getStyle(element){
        var styleText = element.getAttribute('style');
        if(styleText == null)
            return "";
        if (typeof styleText == 'string') // !IE
            return styleText;
        else  // IE
            return styleText.cssText;
    } 

이것은 인라인 스타일에서만 작동하지만 클래스 또는 이와 유사한 스타일을 통해 지정한 스타일에서는 작동하지 않습니다.

다른 참고 사항 : 해당 replace 문에서 일부 문자를 이스케이프해야 할 수도 있지만 아이디어를 얻습니다.

요소의 모든 클래스를 변경하려면

document.getElementById("ElementID").className = "CssClass";

요소에 클래스를 추가하려면

document.getElementById("ElementID").className += " CssClass";

클래스가 요소에 이미 적용되어 있는지 확인하려면

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )