Чытанне ўласцівасцяў з CSS файлаў у JavaScript

Уласцівасці, зададзеныя ў CSS файле, можна прачытаць з дапамогай спецыяльнай функцыі getComputedStyles.

Давайце паглядзім, як гэта робіцца. Хай у нас ёсць наступны элемент:

<div id="elem">
	text
</div>

Хай для гэтага элемента зададзены наступныя стылі:

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

Атрымаем спасылку на элемент у зменную:

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

Цяпер перададзім спасылку на атрыманы элемент у якасці параметра функцыі getComputedStyles:

let computedStyle = getComputedStyle(elem);

У выніку мы атрымаем аб'ект, які змяшчае значэнні CSS уласцівасцяў для нашага элемента. Давайце з яго дапамогай прачытаем, напрыклад, колер:

console.log(computedStyle.color); // выведзе 'red'

А цяпер шырыню:

console.log(computedStyle.width); // выведзе '100px'

А цяпер памер шрыфту:

console.log(computedStyle.fontSize); // выведзе '20px'

Для элемента зададзены наступныя стылі:

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

Па кліку на кнопку вывядзіце шырыню і вышыню элемента.

Для элемента зададзены наступныя стылі:

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

Па кліку на кнопку павялічце шырыню і вышыню элемента ў два разы.