Metoden Window.getComputedStyle()

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 stilark, inhärade stilar och standardstilar från 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 CSSStyleDeclaration-objekt som har alla CSS-attribut och värden för elementet.

Skillnaden mellan getComputedStyle() metoden och style-attributet

Jämför getComputedStyle() metoden med HTMLElements style-attribut: den senare tillåter endast åtkomst till elementets inlineskick, med vilken enhet du än anger, och kan inte ge dig någon information om vilka stilar som tillämpas på elementets stilark.

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