Функция getComputedStyle

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

Синтаксис

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

Подробности

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

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

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

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

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

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

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

html<div id="elem">text</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet 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:

html<div id="elem">text</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // выведет '200px'
console.log('height: ' + style.height); // выведет '200px'

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

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

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

html<div id="elem">text</div>

css#elem {
  width: 30%; /* ширина задана в % */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // выведет ширину в px

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