Čítanie vlastností z CSS súborov v JavaScripte

Vlastnosti nastavené v CSS súbore je možné prečítať pomocou špeciálnej funkcie getComputedStyles.

Pozrime sa, ako sa to robí. Predpokladajme, že máme nasledujúci prvok:

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

Predpokladajme, že pre tento prvok sú nastavené nasledujúce štýly:

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

Získame odkaz na prvok do premennej:

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

Teraz odkaz na získaný prvok odovzdáme ako parameter funkcie getComputedStyles:

let computedStyle = getComputedStyle(elem);

Výsledkom bude objekt, obsahujúci hodnoty CSS vlastností pre náš prvok. Poďme s jeho pomocou prečítať, napríklad farbu:

console.log(computedStyle.color); // vypíše 'red'

A teraz šírku:

console.log(computedStyle.width); // vypíše '100px'

A teraz veľkosť písma:

console.log(computedStyle.fontSize); // vypíše '20px'

Pre prvok sú nastavené nasledujúce štýly:

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

Po kliknutí na tlačidlo vypíšte šírku a výšku prvku.

Pre prvok sú nastavené nasledujúce štýly:

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

Po kliknutí na tlačidlo zväčšite šírku a výšku prvku dvakrát.