Venster getComputedStyle()
Voorbeeld
Verkrijg de berekende achtergrondkleur van een element:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Hieronder meer voorbeelden.
Definitie en gebruik
De getComputedStyle()
methode haalt de berekende CSS-eigenschappen en waarden van een HTML-element op.
De getComputedStyle()
methode retourneert een
CSSStyleDeclaration object
.
Berekende stijl
De berekende stijl is de stijl die op het element wordt gebruikt nadat alle stijlbronnen zijn toegepast.
Stijlbronnen: externe en interne stijlbladen, overgenomen stijlen en standaard browserstijlen.
Zie ook:
Syntaxis
window.getComputedStyle(element, pseudoElement)
Parameters:
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
Winstwaarde
Type | Beschrijving |
Een voorwerp | Een CSSStyleDeclaration-object met alle CSS-eigenschappen en -waarden van het element. |
Meer voorbeelden
Haal alle berekende stijlen uit een element:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
cssObjProp = cssObj.item(x)
text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
Bereken de lettergrootte van de eerste letter in een element (met pseudo-element):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Browserondersteuning
getComputedStyle()
wordt ondersteund in alle browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |