finestra getComputedStyle()
Esempio
Ottieni il colore di sfondo calcolato di un elemento:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Altri esempi di seguito.
Definizione e utilizzo
Il getComputedStyle()
metodo ottiene le proprietà ei valori CSS calcolati di un elemento HTML.
Il getComputedStyle()
metodo restituisce un
CSSStyleDeclaration object
.
Stile calcolato
Lo stile calcolato è lo stile utilizzato sull'elemento dopo che tutte le origini dello stile sono state applicate.
Fonti di stile: fogli di stile esterni e interni, stili ereditati e stili predefiniti del browser.
Guarda anche:
Sintassi
window.getComputedStyle(element, pseudoElement)
Parametri
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
Valore di ritorno
Tipo | Descrizione |
Un oggetto | Un oggetto CSSStyleDeclaration con tutte le proprietà e i valori CSS dell'elemento. |
Altri esempi
Ottieni tutti gli stili calcolati da un elemento:
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>";
}
Ottieni la dimensione del carattere calcolata della prima lettera in un elemento (usando lo pseudo-elemento):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Supporto browser
getComputedStyle()
è supportato in tutti i browser:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |