Metodo getComputedStyle()

Definizione e uso

getComputedStyle() Il metodo ottiene gli attributi CSS calcolati e i valori degli elementi HTML.

getComputedStyle() Il metodo restituisce un oggetto CSSStyleDeclaration.

Stili calcolati

Gli stili calcolati si riferiscono agli stili utilizzati sull'elemento dopo aver applicato tutte le fonti di stile.

Origine degli stili: fogli di stile esterni e interni, stili ereditati e stili predefiniti del browser.

Vedi anche:

Oggetto CSSStyleDeclaration

Esempio

Esempio 1

Ottieni il colore di sfondo calcolato dell'elemento:

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

Prova tu stesso

Esempio 2

Ottieni tutti gli stili calcolati dall'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>";
}

Prova tu stesso

Esempio 3

Ottieni la dimensione del carattere calcolata per la prima lettera dell'elemento (utilizzando il pseudo-elemento):

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

Prova tu stesso

Sintassi

window.getComputedStyle(element, pseudoElement)

Parametro

Parametro Descrizione
element Obbligatorio. L'elemento per il quale ottenere lo stile calcolato.
pseudoElement Opzionale. Il pseudo-elemento da ottenere.

Valore di ritorno

Tipo Descrizione
Oggetto Oggetto CSSStyleDeclaration che possiede tutte le proprietà CSS e i valori dell'elemento.

Differenze tra il metodo getComputedStyle() e l'attributo style

Confronta il metodo getComputedStyle() con l'attributo style dell'HTMLElement: quest'ultimo permette di accedere solo agli stili inline dell'elemento, utilizzando qualsiasi unità tu desideri, e non può fornirti alcuna informazione sugli stili applicati alla tabella di stili dell'elemento.

Supporto dei browser

Tutti i browser supportano getComputedStyle():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto