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