Metoden Window.getComputedStyle()

  • Föregående sida
  • Nästa sida
  • Gå tillbaka till föregående nivå Window Objekt

Definition och användning

getComputedStyle() Metoden hämtar beräknade CSS-attribut och värden för HTML-elementet.

getComputedStyle() Metoden returnerar ett CSSStyleDeclaration-objekt.

Beräknade stilar

Beräknade stilar innebär stilar som används på elementet efter att alla stilkällor har tillämpats.

Stilkälla: Externa och interna stiltabeller, inarbetade stilar och standardstilar i webbläsaren.

Se också:

CSSStyleDeclaration-objekt

Exempel

Exempel 1

Hämta elementets beräknade bakgrundsfärg:

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

Prova själv

Exempel 2

Hämta alla beräknade stilar från 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>";
}

Prova själv

Exempel 3

Hämta beräknad fontstorlek för den första bokstaven i elementet (använd pseudoelement):

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

Prova själv

Syntax

window.getComputedStyle(element, pseudoElement)

Parameter

Parameter Beskrivning
element Obligatoriskt. Elementet för vilket beräknade stilar ska hämtas.
pseudoElement Valfritt. Den pseudoelement som ska hämtas.

Returvärde

Typ Beskrivning
Objekt En CSSStyleDeclaration-objekt som har alla CSS-attribut och värden för elementet.

Skillnaden mellan metoden getComputedStyle() och style-attributet

Jämför metoden getComputedStyle() med HTMLElement:s style-attribut: den senare tillåter endast åtkomst till elementets inlinesytle, och du kan använda vilken enhet som helst du specificerar, och den kan inte ge dig någon information om vilka stilar som tillämpas på elementets stiltabell.

Webbläsarstöd

Alla webbläsare stöder getComputedStyle():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd
  • Föregående sida
  • Nästa sida
  • Gå tillbaka till föregående nivå Window Objekt