Чытанне ўласцівасцяў з 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;
}