Citirea proprietăților din fișierele CSS în JavaScript

Proprietățile definite în fișierul CSS pot fi citite folosind funcția specială getComputedStyles.

Să vedem cum se face acest lucru. Să presupunem că avem următorul element:

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

Să presupunem că pentru acest element sunt definite următoarele stiluri:

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

Să obținem referința la element într-o variabilă:

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

Acum să transmitem referința la elementul obținut ca parametru al funcției getComputedStyles:

let computedStyle = getComputedStyle(elem);

Ca rezultat, vom obține un obiect care conține valorile proprietăților CSS pentru elementul nostru. Să folosim acest obiect pentru a citi, de exemplu, culoarea:

console.log(computedStyle.color); // va afișa 'red'

Și acum lățimea:

console.log(computedStyle.width); // va afișa '100px'

Și acum dimensiunea fontului:

console.log(computedStyle.fontSize); // va afișa '20px'

Pentru element sunt definite următoarele stiluri:

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

La click pe buton afișați lățimea și înălțimea elementului.

Pentru element sunt definite următoarele stiluri:

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

La click pe buton măriți lățimea și înălțimea elementului de două ori.