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

Для более полного понимания см. урок работа с метриками на JavaScript из учебника JavaScript.

Синтаксис

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

Подробности

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

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

var elem = document.getElementById('elem');
var style = getComputedStyle(elem); //в style лежат CSS свойства

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

var elem = document.getElementById('elem');
var style = getComputedStyle(elem);
alert(style.width);

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

var elem = document.getElementById('elem');
var style = getComputedStyle(elem);
alert(style.paddingLeft);

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

<div id="elem">Текст</div>
#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}
var elem = document.getElementById('elem');

var style = getComputedStyle(elem);
alert('paddingLeft: ' + style.paddingLeft); //выведет '30px'
alert('borderTopWidth: ' + style.borderTopWidth); //выведет '20px'
alert('borderTopStyle: ' + style.borderTopStyle); //выведет 'solid'

Нажмите на кнопку - и вы увидите результат:



Lorem ipsum dolorsit amet consectetur adipiscing elit. Sed viverra mollis lorem, fringilla dapibus nisi commodo interdum. Vivamus in turpis quis purus dapibus aliquam id nec velit. In at aliquet sem, a rutrum neque. Vestibulum posuere lobortis accumsan. Etiam non tincidunt erat, vel condimentum turpis.

Неточность getComputedStyle

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

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}
var elem = document.getElementById('elem');

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

Нажмите на кнопку - и вы увидите результат:



Lorem ipsum dolorsit amet consectetur adipiscing elit. Sed viverra mollis lorem, fringilla dapibus nisi commodo interdum. Vivamus in turpis quis purus dapibus aliquam id nec velit. In at aliquet sem, a rutrum neque. Vestibulum posuere lobortis accumsan. Etiam non tincidunt erat, vel condimentum turpis.

То есть: получается, что getComputedStyle игнорирует расширение блока показывает его размеры так, как будто этого расширения не было.

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

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

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

#elem {
	width: 30%; /* ширина задана в % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}
var elem = document.getElementById('elem');

var style = getComputedStyle(elem);
alert('width: ' + style.width);

Нажмите на кнопку - и вы увидите ширину в пикселях, а не в %:



Lorem ipsum dolorsit amet consectetur adipiscing elit. Sed viverra mollis lorem, fringilla dapibus nisi commodo interdum. Vivamus in turpis quis purus dapibus aliquam id nec velit. In at aliquet sem, a rutrum neque. Vestibulum posuere lobortis accumsan. Etiam non tincidunt erat, vel condimentum turpis.