Okno getComputedStyle()
Příklad
Získejte vypočítanou barvu pozadí prvku:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Další příklady níže.
Definice a použití
Metoda getComputedStyle()
získá vypočítané vlastnosti CSS a hodnoty prvku HTML.
Metoda getComputedStyle()
vrací a
CSSStyleDeclaration object
.
Počítaný styl
Vypočítaný styl je styl použitý na prvku po použití všech zdrojů stylů.
Zdroje stylů: externí a interní šablony stylů, zděděné styly a výchozí styly prohlížeče.
Viz také:
Syntax
window.getComputedStyle(element, pseudoElement)
Parametry
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
Návratová hodnota
Typ | Popis |
Objekt | Objekt CSSStyleDeclaration se všemi vlastnostmi a hodnotami CSS prvku. |
Další příklady
Získejte všechny vypočítané styly z prvku:
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>";
}
Získejte vypočítanou velikost písma prvního písmene v prvku (pomocí pseudoprvku):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Podpora prohlížeče
getComputedStyle()
je podporován ve všech prohlížečích:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |