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

При кликване на бутон увеличете ширината и височината на елемента два пъти.