Es gibt vier Möglichkeiten, CSS zur Steuerung der Seite zu verwenden: Inline-Stil (Inline-Stil), Inline-Stil, Link-Stil und importierter Stil.
Inline-Stile (Inline-Stile) werden in das Stilattribut im HTML-Tag geschrieben, z. B. <div></div>
Inline-Stile werden im Style-Tag geschrieben, z. B. <style type="text/css">div{width:100px height:100px}</style>
Der Link-Typ besteht darin, das Link-Tag zum Einführen der CSS-Datei zu verwenden, z. B. <link href="test.css" type="text/css" rel="stylesheet" />
Die Importmethode besteht darin, Import zu verwenden, um die CSS-Datei einzuführen, z. B. @import url("test.css")
Wenn Sie JavaScript verwenden möchten, um die Stilinformationen eines Elements abzurufen, sollte Ihnen als Erstes das Stilattribut des Elements in den Sinn kommen. Das Stilattribut eines Elements stellt jedoch nur den Inline-Stil des Elements dar. Wenn ein Teil der Stilinformationen eines Elements im Inline-Stil und ein Teil in der externen CSS-Datei geschrieben wird, kann dies nicht auf die vollständigen Stilinformationen des Elements zutreffen über das style-Attribut erhalten werden. Daher müssen Sie den berechneten Stil des Elements verwenden, um die Stilinformationen des Elements zu erhalten.
Verwenden Sie die Methode getComputedStyle des Fensterobjekts, um den berechneten Stil eines Elements abzurufen. Der erste Parameter ist das Element, dessen berechneter Stil erhalten werden soll. Klasse (z. B.: before,:after) sind beide Parameter erforderlich.
Geben wir ein Beispiel
<style type="text/css">
#testDiv{
Rand: 1 Pixel durchgehend rot;
Breite: 100px;
Höhe: 100px;
Farbe: rot;
}
</style>
<div id="testDiv"></div>
var testDiv = document.getElementById("testDiv");
var computedStyle = window.getComputedStyle(testDiv, "");
var width = berechneterStyle.width; //100px
var height = berechneterStyle.height; //100px
var color = berechneter Stil. //rgb(255, 0, 0)
[/Code]
Hinweis: Die erhaltenen Farbattribute werden alle im RGB-Format (#, #, #) zurückgegeben.
Wenn Sie zu diesem Zeitpunkt testDiv.style verwenden, um Stilinformationen abzurufen, ist testDiv.style.width definitiv leer.
Die getComputedStyle-Methode ist in IE8 und früheren Versionen nicht implementiert, aber jedes Element im IE verfügt über seine eigene currentStyle-Eigenschaft.
Lassen Sie uns also einen allgemeinen Überblick bekommen
Kopieren Sie den Codecode wie folgt:
var testDiv = document.getElementById("testDiv");
var styleInfo = window.getComputedStyle ? window.getComputedStyle(testDiv, "") : testDiv.currentStyle;
var width = styleInfo.width; //100px;
var height = styleInfo.height; //100px;
var color = styleInfo.color; // rgb(255, 0, 0)
Bitte beachten Sie abschließend, dass der berechnete Stil eines Elements schreibgeschützt ist. Wenn Sie den Stil eines Elements festlegen möchten, müssen Sie das Stilattribut des Elements verwenden (dies ist der eigentliche Zweck des Stilattributs des Elements). .