Beispiel
Holen Sie sich die berechnete (actual showing) Hintergrundfarbe eines div:
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed background color for the test div is: <span
id="demo"></span></p>
<script>
function myFunction() {
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>Das Ergebnis wird sein:
The computed background color for the test div is: rgb(173, 216, 230) Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die getComputedStyle() Methode erhält die ganzen tatsächliche (computed) CSS - Eigenschaft und Werte des angegebenen Elements.
Der berechnete Stil ist der Stil acutally beim Anzeigen des Elements verwendet, nachdem Stylings von mehreren Quellen haben apllied worden.
Style-Quellen können gehören: interne Stylesheets, externe Stylesheets, erbte Stile und Browser Standard-Stile.
Die getComputedStyle() Methode liefert ein CSSStyleDeclaration Objekt .
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11.5 |
Syntax
Parameterwerte Parameter Beschreibung element Erforderlich. Das Element erhält den berechneten Stil für pseudoElement Optional. Ein Pseudo-Element zu erhalten
Technische Details
Rückgabewert: Ein Objekt enthält CSSStyleDeclaration CSS Deklarationsblocks des Elements.
Mehr Beispiele
Beispiel
Holen Sie sich alle berechneten Stile aus einem Element:
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed styles for the test div are: <br><span
id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var txt;
cssObj = window.getComputedStyle(elem, null)
for
(i = 0; i < cssObj.length; i++) {
cssObjProp = cssObj.item(i)
txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script> Versuch es selber " Beispiel
Get Computer Schriftgröße des ersten Buchstaben im Test div (mit Pseudo-Elemente):
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed font size for div::first-letter in the test div
is: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
"first-letter").getPropertyValue("font-size");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script> Versuch es selber "