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

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

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

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

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

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

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

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

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

javascript let computedStyle = getComputedStyle(elem);

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

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

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

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

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

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

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

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