Функция getComputedStyle в JavaScript

Функция 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, а также граница и padding. Реальная ширина блока 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