Einfache Möglichkeit, Elementstile in nativen JS zu erhalten

Während des Entwicklungsprozesses begegnen wir häufig auf den Stil von DOM -Elementen durch JS. Es gibt viele Methoden wie: durch Ändern der Klasse der DOM -Elemente. Jetzt diskutieren wir einheimische JS, um den CSS -Stil von DOM -Elementen zu erhalten. Beachten Sie, dass es sich nicht um eine Einstellung handelt

Bevor Sie anfangen, sprechen wir zunächst darüber, dass alle CSS -Attributobjekte, die schließlich auf das Element angewendet werden, erhalten. Wenn kein Stil auf das Element eingestellt ist, wird der Standardstil des Browsers zurückgegeben.

1.ELE.STYLE

Wenn ich DOM lernte, sehe ich, dass Elementstilwerte durch Ele.Style erhalten werden, aber manchmal bekomme ich nicht die Stilwerte des Knotens, sondern der leere Wert. Dies liegt daran

Beispiel:

 var test = document.getElementById ("test"); // Erhalten Sie den Farbtest.Style.Color des Knotens;

2. GetComputedStyle ()

GetComputedStyle ist ein CSS-Attributwert, mit dem alle enden verwendeten CSS-Attributwerte des aktuellen Elements abgerufen werden können.

Die Syntax ist wie folgt:

 window.getComputedStyle ("Element", "Pseudo-Klasse");

Diese Methode akzeptiert zwei Parameter: um das Element des berechneten Stils und eine Pseudo-Element-Zeichenfolge (zum Beispiel ": vor") zu erhalten. Wenn keine Pseudoelementinformationen erforderlich sind, kann der zweite Parameter null sein. Es kann auch über document.defaultView.getComputedStyle ("Element", "Pseudo-Klasse") verwendet werden.

Beispiel:

 var test = document.getElementById ("test"), Demo = window.getComputedStyle (test, null); // Holen Sie sich die Farbdemo.Color des Knotens

Hinweis: Firefox und Safari werden Farben in das RGB -Format umwandeln. Wenn der Testknoten keinen Stil gibt, verwenden Sie Style.Length, um die Anzahl der Browser -Standardstile anzuzeigen. IE6-8 unterstützt diese Methode nicht. Die folgende Methode ist erforderlich

3. Ele.CurrentStyle

CurrentStyle ist ein Attribut des IE -Browsers selbst. Seine Syntax ähnelt Ele.Style. Die Differenz besteht darin, dass Element.currentStyle den endgültigen CSS -Attributwert des aktuell angewendeten Elements zurückgibt (einschließlich der externen Link -CSS -Datei, das in der Seite eingebettete <style> -attribut usw.).

Grammatik:

 var style = dom.currentStyle;

Beispiel:

 var test = document.getElementById ("test"), Demo = test.currentStyle; // Holen Sie sich die Farbdemo.Color des Knotens;

Hinweis: Für eine umfassende Attributgrenze usw. kehrt dh undefined zurück. Einige andere Browser geben Werte zurück, andere kehren nicht zurück, sondern Attribute wie BorderLeftwidth -Rückgaberwerte.

4. GetPropertyValue ()

GetPropertyValue erhält den direkten Eigenschaftsnamen des CSS -Stils

Die Syntax ist wie folgt:

 window.getComputedStyle (Element, NULL) .GetPropertyValue (Eigenschaft)

Beispiel:

 var test = document.getElementById ('test'); window.getComputedStyle (test, null) .getPropertyValue ("Hintergrundfarbe");

Hinweis: Der Attributname unterstützt kein Camel-Format, IE6-8 unterstützt diese Methode nicht, daher ist die folgende Methode erforderlich

5. Getattribute

GetAttribute ist ähnlich wie GetPropertyValue. Ein Unterschied ist das Kamelformat des Eigenschaftsnamens

Beispiel:

 var test = document.getElementById ('test'); window.getComputedStyle (test, null) .getPropertyValue ("backgroundColor");

Hinweis : Diese Methode unterstützt nur IE6-8

Zusammenfassung:

Die JQuery CSS () -Methode, die zugrunde liegende Operation verwendet die GetComputedStyle und GetPropertyValue -Methoden. Wenn wir native JS -Entwicklung verwenden, können wir den Wert des Elements durch die oben genannten Methoden erhalten.

Das Folgende ist eine Methode, die mit IE, Firefox, Chrome und anderen Browsern kompatibel ist, um Elementstile zu erhalten, die auf das Projekt angewendet werden können

 Funktion getStyle (ele) {var style = null; if (window.getComputedStyle) {style = window.getComputedStyle (ele, null); } else {style = ele.currentStyle; } return style;}

Die obige einfache Möglichkeit, Elementstile in nativem JS zu erhalten, ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.