Читање својстава из CSS датотека у JavaScript-у

Својства задата у CSS датотеци могу се прочитати помоћу специјалне функције getComputedStyles.

Хајде да погледамо како се то ради. Претпоставимо да имамо следећи елемент:

<div id="elem">
	текст
</div>

Претпоставимо да су за овај елемент задати следећи стилови:

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

Добијмо референцу на елемент у променљиву:

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

Сада проследимо референцу на добијени елемент као параметар функције getComputedStyles:

let computedStyle = getComputedStyle(elem);

Као резултат добићемо објекат који садржи вредности CSS својстава за наш елемент. Хајде да његовом помоћу прочитамо, на пример, боју:

console.log(computedStyle.color); // исписаће 'red'

А сада ширину:

console.log(computedStyle.width); // исписаће '100px'

А сада величину фонта:

console.log(computedStyle.fontSize); // исписаће '20px'

За елемент су задати следећи стилови:

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

При клику на дугме испишите ширину и висину елемента.

За елемент су задати следећи стилови:

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

При клику на дугме увећајте ширину и висину елемента два пута.