Zusammenfassung:
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:
Die Codekopie lautet wie folgt:
var test = document.getElementById ("test");
// Holen Sie sich die Farbe des Knotens
test.style.color;
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:
Die Codekopie lautet wie folgt:
var test = document.getElementById ("test"),
Demo = window.getComputedStyle (Test, NULL);
// Holen Sie sich die Farbe des Knotens
Demo.Color
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:
Die Codekopie lautet wie folgt:
var test = document.getElementById ("test"),
Demo = test.currentStyle;
// Holen Sie sich die Farbe des Knotens
Demo.Color;
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:
Die Codekopie lautet wie folgt:
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:
Die Codekopie lautet wie folgt:
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
Die Codekopie lautet wie folgt:
Funktion getStyle (ele) {
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle (ele, null);
}anders{
style = ele.currentStyle;
}
Rückkehrstil;
}