PS: Es soll den Stil bekommen, nicht den Stil festlegen. Wenn für das Element kein Stilwert festgelegt wird, wird der vom Browser angegebene Standardwert zurückgegeben. (Forum sortiert)
1. Element.Style: Nur der Stilwert, der im Stilattribut im Element -Tag geschrieben wurde, kann nicht erhalten werden. Das in <style> </style> definierte Stilattribut und durch <link href = "css.css"> geladen werden nicht erhalten werden.
Die Codekopie lautet wie folgt:
var ele = document.getElementById ('ele');
ele.style.color; // Farbe bekommen
2. Window.GetComputedStyle (): Es kann alle endgültigen CSS -Attributwerte des aktuellen Elements erhalten.
Die Codekopie lautet 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.
Die Codekopie lautet wie folgt:
var ele = document.getElementById ('ele');
var styles = window.getComputedStyle (ele, null);
Styles.Color; // Farbe bekommen
Sie können style.length verwenden, um die Anzahl der Browser -Standardstile anzuzeigen. IE6-8 unterstützt diese Methode nicht und die folgende Methode muss verwendet werden. Für Firefox und Safari wird die Farbe in das RGB -Format umgewandelt.
3. ELEMET.
Die Codekopie lautet wie folgt:
var ele = document.getElementById ('ele');
var styles = ele.currentStyle;
Styles.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.
V.
Die Codekopie lautet wie folgt:
var ele = document.getElementById ('ele');
window.getComputedStyle (Ele, Null) .GetPropertyValue ('Farbe');
Hinweis: Der Attributname unterstützt kein Camel-Format, IE6-8 unterstützt diese Methode nicht, daher ist die folgende Methode erforderlich
5. getAtTribute (): Ähnlich wie bei GetPropertyValue ist ein Unterschied das Kamelformat des Eigenschaftsnamens
Die Codekopie lautet wie folgt:
var test = document.getElementById ('test');
window.getComputedStyle (test, null) .getPropertyValue ("backgroundColor");
Hinweis: Diese Methode unterstützt nur IE6-8.
Die folgende Methode zur Erlangung des Stils ist mit IE, Chrom, Firefox usw. kompatibel
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;
}
In JQuery wird CSS () häufig verwendet, um Stileigenschaften zu erhalten, und der zugrunde liegende Betrieb wendet die GetComputedStyle- und GetPropertyValue -Methoden an.