# Функция getComputedStyle

Функция `getComputedStyle` позволяет получить значение любого CSS свойства элемента, даже из CSS файла.

## Синтаксис

`let объект = getComputedStyle(элемент);`

## Подробности

Как оно работает (внимание: не так как мы ожидаем): параметром функция принимает элемент, а возвращает объект, который содержит в себе все CSS свойства переданного элемента. Давайте положим этот объект в переменную `style`. Название произвольное, это просто переменная - как придумаем, так и будем обращаться:

`let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); // в style лежат CSS свойства`

Давайте выведем, к примеру, ширину. Это делается так - `style.width`:

`let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); console.log(style.width);`

Чтобы вывести, к примеру, левый `padding` - делаем так - `style.paddingLeft`:

`let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); console.log(style.paddingLeft);`

В следующем примере мы выведем все интересующие нас CSS свойства для нашего элемента:

`<div id="elem">text</div>` `#elem { width: 200px; height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; }` `let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); console.log('paddingLeft: ' + style.paddingLeft); // выведет '30px' console.log('borderTopWidth: ' + style.borderTopWidth); // выведет '20px' console.log('borderTopStyle: ' + style.borderTopStyle); // выведет 'solid'`

## Неточность getComputedStyle

Иногда функция `getComputedStyle` работает не совсем корректно с шириной и высотой. Это связано с тем, что `padding` и граница расширяют блок. В следующем примере блоку задана ширина `200px`, а также граница и `border`. Реальная ширина блока `300px`, но `getComputedStyle` все равно выведет `200px`:

`<div id="elem">text</div>` `#elem { width: 200px; height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; }` `let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); console.log('width: ' + style.width); // выведет '200px' console.log('height: ' + style.height); // выведет '200px'`

То есть: получается, что `getComputedStyle` игнорирует расширение блока показывает его размеры так, как будто этого расширения не было. Но это еще не все: также имеет значение наличие или отсутствие полосы прокрутки - некоторые браузеры отнимают ширину полосы прокрутки от ширины, вычисленной через `getComputedStyle`, а некоторые не отнимают. В общем тут вообще все не кроссбраузерно и лучше `getComputedStyle` для определения ширины и высоты не использовать, а пользоваться метриками, которые мы изучим чуть ниже.

## Вычисленные значения

Есть еще один нюанс: если ширина задана в `%` - то после работы `getComputedStyle` мы увидим ее в `px`. То есть по сути мы получаем не заданную ширину, а вычисленную. Смотрите на следующем примере:

`<div id="elem">text</div>` `#elem { width: 30%; /* ширина задана в % */ height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; }` `let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); console.log('width: ' + style.width); // выведет ширину в px`

## Смотрите также

- свойство `cssText`,
  которое массово задает CSS стили

← →
↑
en ru