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

По клику на кнопку увеличьте ширину и высоту элемента в два раза.