Window getComputedStyle() metode

  • Forrige side
  • Næste side
  • Gå tilbage til niveauet over Window Objekt

Definition og brug

getComputedStyle() Metoden henter HTML-elementets beregnede CSS-egenskaber og værdier.

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ørrelse for den første bogstav i elementet (brug af 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 En CSSStyleDeclaration-objekt, der indeholder alle CSS-egenskaber og værdier for elementet.

Forskellen mellem getComputedStyle() metoden og style-egenskaben

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

Browserstøtte

Alle browsere understøtter getComputedStyle()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support
  • Forrige side
  • Næste side
  • Gå tilbage til niveauet over Window Objekt