Čitanje svojstava iz CSS fajlova u JavaScript

Svojstva postavljena u CSS fajlu mogu se pročitati pomoću posebne funkcije getComputedStyles.

Hajde da pogledamo kako se to radi. Recimo da imamo sledeći element:

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

Neka su za ovaj element zadati sledeći stilovi:

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

Dobijamo referencu na element u promenljivu:

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

Sada prosledimo referencu na dobijeni element kao parametar funkcije getComputedStyles:

let computedStyle = getComputedStyle(elem);

Kao rezultat ćemo dobiti objekat koji sadrži vrednosti CSS svojstava za naš element. Hajde da pomoću njega pročitamo, na primer, boju:

console.log(computedStyle.color); // ispisaće 'red'

A sada širinu:

console.log(computedStyle.width); // ispisaće '100px'

A sada veličinu fonta:

console.log(computedStyle.fontSize); // ispisaće '20px'

Za element su zadati sledeći stilovi:

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

Na klik na dugme ispišite širinu i visinu elementa.

Za element su zadati sledeći stilovi:

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

Na klik na dugme povećajte širinu i visinu elementa dva puta.