Читање на својства од CSS датотеки во JavaScript

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

Ајде да погледнеме како се прави ова. Да претпоставиме дека го имаме следниот елемент:

html<div id="elem">
  text
</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;
}