Четене на свойства от 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;
}