Window getComputedStyle() Methode

Definitie en gebruik

getComputedStyle() De methode haalt de berekende CSS-eigenschappen en waarden van het HTML-element 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 stijltabellen, geërfde stijlen en standaardstijlen van de browser.

Zie ook:

CSSStyleDeclaration object

Voorbeeld

Voorbeeld 1

Verkrijg de berekende achtergrondkleur van het element:

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

Probeer het zelf

Voorbeeld 2

Verkrijg alle berekende stijlen van het 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>";
}

Probeer het zelf

Voorbeeld 3

Verkrijg de berekende lettergrootte van de eerste letter van het element (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 waarvoor je de berekende stijl wilt verkrijgen.
pseudoElement Optioneel. De pseudo-element die je wilt verkrijgen.

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 laat alleen de inline-stijl van het element toe, die je met elke door jou opgegeven eenheid kan gebruiken, en kan je geen informatie geven over welke stijlregels uit de stijltafel van 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