CSS failos norādīto īpašību lasīšana JavaScript

Īpašības, kas norādītas CSS failā, var nolasīt, izmantojot speciālu funkciju getComputedStyles.

Paskatīsimies, kā tas tiek darīts. Pieņemsim, ka mums ir šāds elements:

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

Pieņemsim, ka šim elementam ir noteikti šādi stili:

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

Iegūsim atsauci uz elementu mainīgajā:

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

Tagad nodosim atsauci uz iegūto elementu kā parametru funkcijai getComputedStyles:

let computedStyle = getComputedStyle(elem);

Rezultātā mēs iegūsim objektu, kurs satur CSS īpašību vērtības mūsu elementam. Izmantosim to, lai nolasītu, piemēram, krāsu:

console.log(computedStyle.color); // izvadīs 'red'

Un tagad platumu:

console.log(computedStyle.width); // izvadīs '100px'

Un tagad fonta izmēru:

console.log(computedStyle.fontSize); // izvadīs '20px'

Elementam ir noteikti šādi stili:

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

Kad noklikšķina uz pogas, izvadiet elementa platumu un augstumu.

Elementam ir noteikti šādi stili:

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

Kad noklikšķina uz pogas, palieliniet elementa platumu un augstumu divas reizes.