Lettura delle proprietà dai file CSS in JavaScript

Le proprietà impostate nel file CSS possono essere lette utilizzando una funzione speciale getComputedStyles.

Vediamo come si fa. Supponiamo di avere il seguente elemento:

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

Supponiamo che per questo elemento siano impostati i seguenti stili:

#elem {
	width: 100px;
	color: red;
	font-size: 20px;
}

Otteniamo un riferimento all'elemento in una variabile:

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

Ora passiamo il riferimento all'elemento ottenuto come parametro della funzione getComputedStyles:

let computedStyle = getComputedStyle(elem);

Di conseguenza, otterremo un oggetto che contiene i valori delle proprietà CSS per il nostro elemento. Usiamolo per leggere, ad esempio, il colore:

console.log(computedStyle.color); // visualizzerà 'red'

E ora la larghezza:

console.log(computedStyle.width); // visualizzerà '100px'

E ora la dimensione del font:

console.log(computedStyle.fontSize); // visualizzerà '20px'

Per l'elemento sono impostati i seguenti stili:

#elem {
	width: 200px;
	height: 200px;
}

Al click sul pulsante, visualizza la larghezza e l'altezza dell'elemento.

Per l'elemento sono impostati i seguenti stili:

#elem {
	width: 200px;
	height: 200px;
}

Al click sul pulsante, raddoppia la larghezza e l'altezza dell'elemento.