Window getComputedStyle() metode

Definition og brug

getComputedStyle() Metoden henter beregnede CSS egenskaber og værdier for HTML elementet.

getComputedStyle() Metoden returnerer et CSSStyleDeclaration objekt.

Beregnede stilarter

Beregnede stilarter refererer til stilarter, der bruges på elementet efter, at alle stilkilder er anvendt.

Stilkilde: Eksterne og interne stilark, arvede stilarter og standardstilarter fra browseren.

Se også:

CSSStyleDeclaration objekt

Eksempel

Eksempel 1

Få elementets beregnede baggrundsfarve:

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

Prøv det selv

Eksempel 2

Få alle beregnede stilarter fra elementet:

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

Prøv det selv

Eksempel 3

Få beregnede skriftstørrelsen af den første bogstav i elementet (brug pseudo-element):

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

Prøv det selv

Syntaks

window.getComputedStyle(element, pseudoElement)

Parameter

Parameter Beskrivelse
element Obligatorisk. Elementet, der skal have beregnede stilarter hentet.
pseudoElement Valgfri. Den pseudo-element, der skal hentes.

Returværdi

Type Beskrivelse
Objekt CSSStyleDeclaration objekt, der indeholder alle CSS egenskaber og værdier for elementet.

Forskellen mellem getComputedStyle() metoden og style egenskab

Sammenlign getComputedStyle() metoden med HTMLElements style egenskab: sidstnævnte giver kun adgang til elementets indlejrede stil, bruger enhver enhed, du angiver, og kan ikke fortælle dig nogen information om de anvendte stilregler i elementets stilark.

Browserunderstøttelse

Alle browsere understøtter getComputedStyle():

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