La Funzione getComputedStyle

La funzione getComputedStyle permette di ottenere il valore di qualsiasi proprietà CSS di un elemento, anche dal file CSS.

Sintassi

let oggetto = getComputedStyle(elemento);

Dettagli

Come funziona (attenzione: non come ci aspettiamo): come parametro la funzione accetta un elemento, e restituisce un oggetto, che contiene tutte le proprietà CSS dell'elemento passato. Mettiamo questo oggetto in una variabile style. Il nome è arbitrario, è semplicemente una variabile - come la chiamiamo, così ci riferiremo ad essa:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // in style ci sono le proprietà CSS

Visualizziamo, ad esempio, la larghezza. Si fa così - style.width:

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

Per visualizzare, ad esempio, il padding sinistro - facciamo così - style.paddingLeft:

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

Nel prossimo esempio visualizzeremo tutte le proprietà CSS che ci interessano per il nostro elemento:

<div id="elem">text</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // visualizzerà '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // visualizzerà '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // visualizzerà 'solid'

Imprecisione di getComputedStyle

A volte la funzione getComputedStyle funziona non del tutto correttamente con larghezza e altezza. Ciò è dovuto al fatto che padding e bordo espandono il blocco. Nel prossimo esempio al blocco è stata assegnata una larghezza di 200px, così come un bordo e border. La larghezza reale del blocco è 300px, ma getComputedStyle visualizzerà comunque 200px:

<div id="elem">text</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // visualizzerà '200px'
console.log('height: ' + style.height); // visualizzerà '200px'

Ovvero: risulta che getComputedStyle ignora l'espansione del blocco e mostra le sue dimensioni come se questa espansione non ci fosse. Ma non è tutto: ha importanza anche la presenza o assenza della barra di scorrimento - alcuni browser sottraggono la larghezza della barra di scorrimento dalla larghezza calcolata tramite getComputedStyle, mentre altri non la sottraggono. In breve, qui in generale tutto non è cross-browser ed è meglio non usare getComputedStyle per determinare larghezza e altezza, ma usare le metriche, che studieremo un po' più avanti.

Valori Calcolati

C'è un'altra sfumatura: se la larghezza è impostata in % - dopo il lavoro di getComputedStyle la vedremo in px. Ovvero in sostanza non otteniamo la larghezza impostata, ma quella calcolata. Guardate il prossimo esempio:

<div id="elem">text</div>

#elem {
	width: 30%; /* larghezza impostata in % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // visualizzerà la larghezza in px

Vedi Anche

la proprietà cssText,
che imposta massivamente gli stili CSS