Wie entferne ich CSS-Eigenschaften mit Javascript?

Ist es möglich, eine CSS-Eigenschaft eines Elements mit JavaScript zu entfernen? zB habe ich div.style.zoom = 1.2, jetzt möchte ich die Zoom-Eigenschaft über JavaScript entfernen?

Sie haben zwei Möglichkeiten:

OPTION 1:

Sie können die removeProperty-Methode verwenden . Es wird ein Stil aus einem Element entfernt.

el.style.removeProperty('zoom');

OPTION 2:

Sie können den Standardwert festlegen:

el.style.zoom = "";

Der effektive Zoom entspricht nun den Definitionen in den Stylesheets (über Link- und Style-Tags). Diese Syntax ändert also nur den lokalen Stil dieses Elements.

removeProperty entfernt einen Stil aus einem Element.

Beispiel:

div.style.removeProperty ('zoom');

MDN-Dokumentationsseite:
CSSStyleDeclaration.removeProperty

div.style.removeProperty('zoom');

Sie können das styleSheets-Objekt verwenden:

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

Vorsichtsmaßnahme Nr. 1: Sie müssen den Index Ihres Stylesheets und den Index Ihrer Regel kennen.

Vorsichtsmaßnahme Nr. 2: Dieses Objekt wird von den Browsern inkonsistent implementiert. Was in einem funktioniert, funktioniert möglicherweise nicht in den anderen.

element.style.height = null;

Ausgabe:

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

Sie können versuchen, alle Elemente mit dieser Klasse zu finden und die Eigenschaft "zoom" auf "nichts" zu setzen.

Wenn Sie die JQasy-Javascript-Bibliothek verwenden, können Sie dies tun $(".the_required_class").css("zoom","")

Bearbeiten: Diese Aussage wurde entfernt, da sie sich als nicht wahr herausstellte, wie in einem Kommentar und anderen Antworten ausgeführt, die seit 2010 tatsächlich möglich sind.

Falsch: Es gibt keine allgemein bekannte Möglichkeit, Stylesheets über JavaScript zu ändern.

Sie können dies auch in jQuery tun, indem Sie sagen $(selector).css("zoom", "")

Dies sollte den Trick machen - den Inline-Stil für den Zoom auf normal setzen:

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

Wenn Sie die Immobilie bereits kennen, wird dies tatsächlich geschehen ...

beispielsweise:

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

Beachten Sie, dass dies nur für Inline-Stile funktioniert ... nicht für Stile, die Sie durch eine Klasse oder ähnliches angegeben haben ...

Anderer Hinweis: Möglicherweise müssen Sie einige Zeichen in dieser Ersetzungsanweisung maskieren, aber Sie haben die Idee.

So ändern Sie alle Klassen für ein Element:

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

So fügen Sie einem Element eine zusätzliche Klasse hinzu:

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

So überprüfen Sie, ob eine Klasse bereits auf ein Element angewendet wurde:

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