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å:
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");
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>"; }
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");
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