Window getComputedStyle() Methode

Definitie en gebruik

getComputedStyle() De methode haalt de berekende CSS-eigenschappen en waarden van HTML-elementen op.

getComputedStyle() De methode retourneert een CSSStyleDeclaration-object.

Berekende stijlen

Berekende stijlen verwijzen naar de stijlen die op het element worden toegepast nadat alle stijlbronnen zijn toegepast.

Stijlbron: externe en interne stijlbladen, geërfd stijlen en standaardstijlen van de browser.

Zie ook:

CSSStyleDeclaration object

Voorbeeld

Voorbeeld 1

Haal de berekende achtergrondkleur van het element op:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

Probeer het zelf

Voorbeeld 2

Haal alle berekende stijlen van het element op:

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>";
}

Probeer het zelf

Voorbeeld 3

Haal de berekende lettergrootte van de eerste letter van het element op (gebruik pseudo-element):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");

Probeer het zelf

Syntax

window.getComputedStyle(element, pseudoElement)

Parameters

Parameters Beschrijving
element Verplicht. Het element waarvan de berekende stijl moet worden opgehaald.
pseudoElement Optioneel. De pseudo-element die moet worden opgehaald.

Retourwaarde

Type Beschrijving
Object Een CSSStyleDeclaration-object dat alle CSS-eigenschappen en waarden van het element bevat.

Het verschil tussen de methode getComputedStyle() en de eigenschap style

Vergelijk de methode getComputedStyle() met de style-eigenschap van HTMLElement: de laatste toegang tot de inline-stijl van het element, die elk door u opgegeven eenheid kan gebruiken, en kan geen informatie verstrekken over welke stijlregels van het stijlblad op het element worden toegepast.

Browser support

All browsers support getComputedStyle():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support