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

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

←→
↑
en ru