Grundcode:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> document </title> <style> div {color: gelb; } </style> </head> <body> <div> Dies ist div </div> </body> </html>1. Erhalten Sie es mit dem Attribut "Element.style"
<Script> var div = document.getElementsByTagName ("div") [0]; console.log (div.style.color); // "" console.log (Div.Style.BackgroundColor); // rot </script>Das Element.Style -Attribut kann nur Inline -Stile erhalten, können keine Stile im <Styles> -Tag erhalten und auch externe Stile erhalten.
Da Element.Style ein Attribut eines Elements ist, können wir das Attribut neu zuweisen, um die Anzeige des Elements zu überschreiben.
<Script> var div = document.getElementsByTagName ("div") [0]; Div.Style ['Background-Color'] = "Green"; console.log (div.style.backgroundColor); // Green </script>2. Holen Sie sich Stile durch GetComputedstyle und CurrentStyle
Die Nutzungsumgebung von GetComputedStyle ist Chrom/Safari/Firefox, dh 9,10,11
<Script> var div = document.getElementsByTagName ("div") [0]; var styleobj = window.getComputedStyle (div, null); console.log (styleobj.backgroundColor); // rote Konsole.log (styleobj.color); // gelb </script>CurrentStyle kann im IE perfekt unterstützt werden, Chrome unterstützt nicht, FF unterstützt nicht
<Script> var div = document.getElementsByTagName ("div") [0]; var styleobj = div.currentStyle; console.log (styleobj.backgroundColor); // rote Konsole.log (styleobj.color); // gelb </script>3.. Der Unterschied zwischen Ele.Style und GetComputedstyle oder CurrentStyle
3.1ele
3.2 Ele.Style kann den CSS -Stil nur in der Style -Eigenschaft in der Linie einstellen und GetComputedStyle und CurrentStyle können auch andere Standardwerte erhalten.
3.3 Was Ele.Style den Stil im Stilattribut bekommt, nicht unbedingt den endgültigen Stil, während die anderen beiden den endgültigen CSS -Stil des Elements erhalten
4. Erhalten Sie Stilkompatibilitätsschreiben
<Script> // Erhalten Sie den Nicht-Line-Stil (den Stil im Stil Tag oder den Stil in der Link-CSS-Datei), OBJ ist das Element, Attr ist die Funktion des Stilnamens GetStyle (obj, attr) {// für dh if (obj.currentStyle) {return obj.currentStyle [attr]; // Da der von der Funktion übergebene ATT eine Zeichenfolge ist, müssen Sie [] den Wert verwenden} else {// für Nicht-IS-Rückgabefenster.getComputedStyle (OBJ, False) [Attr]; }} /* Das CSS -Attribut erhalten oder festlegen* / Funktion CSS (obj, attr, value) {if (argumente.length == 2) {return getStyle (obj, attr); } else {obj.style [attr] = value; }} </script>5.Window.getComputedStyle (Ele [, pseudoelt]);
Wenn der zweite Parameter null oder weggelassen ist, erhalten Sie das CSSstyledeClaration -Objekt, das ELE ist
Wenn es sich um eine Pseudoklasse handelt, wird das CSSstyledeClaration-Objekt der Pseudoklasse erhalten
<Style> div {width: 200px; Höhe: 200px; Hintergrundfarbe:#fc9; Schriftgröße: 20px; Text-Align: Mitte; } div: After {Inhalt: "Dies ist After"; Anzeige: Block; Breite: 100px; Höhe: 100px; Hintergrundfarbe:#F93; Rand: 0 Auto; Zeilenhöhe: 50px; } </style> <body> <div id = 'mydiv'> Dies ist div </div> <input id = 'btn' type = "button" value = 'getStyle'/> <script> var btn = document.querySelector ('#btn'); btn.onclick = function () {var document = document.querySelector ('#mydiv'); var styleobj = window.getComputedStyle (div 'After'); console.log (styleobj ['width']); } </script> </body>6.GetPropertyValue erhält den angegebenen Eigenschaftswert im CSSstyledeClaration -Objekt
<Script> var div = document.getElementsByTagName ("div") [0]; var styleobj = window.getComputedStyle (div, null); console.log (styleobj.getPropertyValue ("Hintergrundfarbe")); </script>PropertyName in GetPropertyValue (PropertyName); Kann kein Kamelausdruck sein
OBJ.CurrentStyle ['Rand-Links'] Werke
Obj.CurrentStyle ['marginleft'] funktioniert
window.getComputedStyle (OBJ, NULL) ['Margin-links'] funktioniert
window.getComputedStyle (OBJ, NULL) ['marginleft'] funktioniert
window.getComputedStyle (OBJ, NULL) .GetPropertyValue ('Margin-links') gültig
window.getComputedStyle (OBJ, NULL) .GetPropertyValue ('marginleft') Ungültig
obj.currentStyle.width ist gültig
obj.currentStyle.background-color ungültig
Obj.CurrentStyle.BackgroundColor Works
window.getComputedStyle (OBJ, NULL) .WIDTH GIINT
window.getComputedStyle (OBJ, NULL). Background-Color Invalid
window.getComputedStyle (OBJ, NULL). BackgroundColor funktioniert
Zusammenfassend kann das Attribut mit "-" nicht direkt darauf hingewiesen werden, daher gibt es eine GetPropertyValue-Methode, um sie zu verarbeiten, aber [] kann verwendet werden, um GetPropertyValue zu ersetzen.
7.DefaultView
In vielen Online -Demo -Codes wird GetComputedStyle über das Dokument aufgerufen. DefaultView -Objekt. In den meisten Fällen ist dies nicht erforderlich, da es direkt über das Fensterobjekt aufgerufen werden kann. Es gibt jedoch eine Situation, in der Sie DefaultView verwenden müssen, um auf die Stile im Subframe von Firefox3.6 (IFRame) zugreifen zu können.
Die obige einfache Implementierungsmethode zum Erhalten von Stilen (empfohlen) von JS 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.