Функция 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">текст</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">текст</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">текст</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 стилове