jak usunąć właściwość css za pomocą javascript?

czy można usunąć właściwość CSS elementu za pomocą JavaScript? np. mam div.style.zoom = 1.2, teraz chcę usunąć właściwość zoom poprzez JavaScript?

Masz dwie opcje:

OPCJA 1:

Możesz użyć metody removeProperty . Usunie styl z elementu.

el.style.removeProperty('zoom');

OPCJA 2:

Możesz ustawić wartość domyślną:

el.style.zoom = "";

Efektywne powiększenie będzie teraz zgodne z definicjami określonymi w arkuszach stylów (poprzez tagi link i style). Tak więc ta składnia zmodyfikuje tylko lokalny styl tego elementu.

removeProperty usunie styl z elementu.

Przykład:

div.style.removeProperty („zoom”);

Strona dokumentacji MDN:
CSSStyleDeclaration.removeProperty

div.style.removeProperty('zoom');

Możesz użyć obiektu styleSheets:

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

Zastrzeżenie nr 1: Musisz znać indeks swojego arkusza stylów i indeks swojej reguły.

Zastrzeżenie # 2: Ten obiekt jest implementowany niekonsekwentnie przez przeglądarki; to, co działa w jednym, może nie działać w innych.

element.style.height = null;

wynik:

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

Możesz spróbować znaleźć wszystkie elementy, które mają tę klasę i ustawić właściwość „zoom” na „none”.

Jeśli używasz biblioteki javascript jQuery, możesz to zrobić za pomocą $(".the_required_class").css("zoom","")

Edycja: Usunąłem to stwierdzenie, ponieważ okazało się, że to nieprawda, jak wskazano w komentarzu i innych odpowiedziach, że rzeczywiście jest to możliwe od 2010 roku.

Fałsz: nie ma ogólnie znanego sposobu modyfikowania arkuszy stylów z JavaScript.

Możesz to również zrobić w jQuery, mówiąc $(selector).css("zoom", "")

To powinno załatwić sprawę - ustawianie wbudowanego stylu na normalny dla powiększenia:

$ („div”). attr („style”, „zoom: normal;”);

właściwie, jeśli już znasz tę właściwość, zrobi to ...

na przykład:

<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;
    } 

Pamiętaj, że działa to tylko dla stylów wbudowanych ... nie stylów określonych przez klasę lub coś w tym stylu ...

Inna uwaga: być może będziesz musiał uciec przed niektórymi postaciami w instrukcji zamiany, ale masz pomysł.

Aby zmienić wszystkie klasy dla elementu:

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

Aby dodać dodatkową klasę do elementu:

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

Aby sprawdzić, czy klasa jest już zastosowana do elementu:

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