Wie entferne ich CSS-Eigenschaften mit Javascript?

195

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?

javascript css

— saß
quelle

3

Bitte stellen Sie klar: Versuchen Sie, eine Klasse aus einem Element oder ein Attribut aus einem Element zu entfernen?

— Jan Hančič

1

Entschuldigung, kein Klassenattribut für ein Element.

— saß am

warum abstimmen? Es ist eine anständige Frage, nein?

— Roland Bouman

2

Hallo, ich verstehe nicht - warum hast du die Antwort der Naivisten als "akzeptierte Antwort" markiert? Ich meine, seine Lösung ist gut für den Fall, dass Sie Elemente nach Klasse suchen möchten, aber alles in Ihrer Frage zeigt an, dass Sie nach einer Methode gesucht haben, um den Effekt des Festlegens einer Eigenschaft des lokalen Stils zu ändern. Sicher passt meine Antwort besser zum Problem? Vielleicht habe ich deine Frage falsch verstanden?

— Roland Bouman

1

@RolandBouman Eigentlich sollte die akzeptierte Antwort in die von Edvinas Ilčenko geändert werden, da sie sich mit den Fragen zum Entfernen befasst und nicht zum Standard. Ihre Antwort hat immer noch Wert, daher habe ich sie bearbeitet, um die Unterscheidung zu verdeutlichen.

— Whitneyland

187

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.

— Roland Bouman
quelle

… Zusammen mit dem Benutzer-CSS und den Standardstilen des Browsers.

— Quentin

Ich habe das OP so verstanden, dass sie es so machen wollten, als hätten sie die Stileigenschaft des Elements nicht festgelegt, was genau das ist, was Sie bereitgestellt haben. Ich habe versucht, el.style.removeProperty ('zoom') zu verwenden. (oder 'füllen', in meinem Fall), das scheint im IE dasselbe zu tun und von den anderen Browsern ignoriert zu werden. Aus irgendeinem Grund war ich überrascht, dass das Festlegen einer leeren Zeichenfolge den gleichen Effekt hat und auf allen Browsern (neueren Versionen) zu funktionieren scheint.

— Shavais

Ist dieses Verhalten irgendwo in einem Standard angegeben? Ich kann es nicht finden :-(

— Oliver Joseph Ash

@OliverJosephAsh ja, es ist dokumentiert, siehe diese Antwort unten stackoverflow.com/a/7901886/700206

— Whitney

120

removeProperty entfernt einen Stil aus einem Element.

Beispiel:

div.style.removeProperty ('zoom');

MDN-Dokumentationsseite:
CSSStyleDeclaration.removeProperty

— Edvinas Ilčenko
quelle

25

div.style.removeProperty('zoom');

— Joe
quelle

10

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.

— james.garriss
quelle

Das scheint wirklich spröde zu sein. Wird es nicht brechen, wenn sich Ihre Indizes ändern?

— Casey Rodarmor

Ja. Genau das sagt Vorbehalt Nr. 1.

— James.garriss

Mein Chrome 26 hat keine CSSStyleRule.prototype.removeProperty= (In der Tat CSSStyleRulehat keine Methoden. = (

— Rudie

CSSStyleSheet.prototype.removeRulezur Rettung.

— Rudie

@ Rudie, nicht wahr CSSStyleSheet.prototype.deleteRule?

— Roka

7

element.style.height = null;

Ausgabe:

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

— T.Todua
quelle

Es scheint, dass das Setzen des Stils auf null in IE11 nicht funktioniert.

— MaximeW

1

Warum sollte sich jemand um IEBrowser kümmern ? Ich ignoriere sie absichtlich schon seit Jahren.

— T.Todua

4

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.

— Naivisten
quelle

5

Ja da ist. Programmgesteuertes Ändern von Stylesheets, obwohl Javascript nicht schwierig ist. Es funktioniert browserübergreifend mit großer Leistung und ist wirklich sinnvoll, wenn eine Eigenschaft geändert wird, die für eine Reihe von Elementen gleich sein sollte. Wie auch im Januar 2010. Hier ist ein kurzes Beispiel: stackoverflow.com/questions/14927706/…

— Clox

Clox: Stylesheets hinzufügen, die einige Eigenschaften programmgesteuert überschreiben - natürlich! Ändern der bereits geladenen - Ich habe noch nichts davon gehört.

— Naivisten

Soll es eher css () als attr () sein? Oder ist es vielleicht attr () im IE?

— Alex KeySmith

es sollte eigentlich sein css, nicht attrdu hast recht.

— Naivisten

1

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

— TryingToImprove
quelle

0

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

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

— Matt
quelle

1

Die Frage war, wie ein Stil entfernt werden kann. Diese Antwort zerstört alle vorhandenen Stile und ersetzt sie durch einen neuen Eintrag.

— Whitneyland

0

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.

— MaxOvrdrv
quelle

-3

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)/) )

— thejustv
quelle

1

Die Frage war, wie man einen Stil entfernt, diese Antwort hat nichts damit zu tun.

— Whitneyland