Функцыя 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'

Гэта значыць: атрымліваецца, што getComputedStyle ігнаруе пашырэнне блока паказвае яго памеры так, быццам гэтага пашырэння не было. Але гэта яшчэ не ўсё: таксама мае значэнне наяўнасць ці адсутнасць палосы пракруткі - некаторыя браўзеры аднімаюць шырыню палосы пракруткі ад шырыні, вылічанай праз getComputedStyle, а некаторыя не аднімаюць. Наогул тут наогул усё не кросбраўзерна і лепш getComputedStyle для вызначэння шырыні і вышыні не выкарыстоўваць, а карыстацца метрыкамі, якія мы вывучым крыху ніжэй.

Вылічаныя значэнні

Ёсць яшчэ адзін нюанс: калі шырыня зададзена ў % - то пасля работы getComputedStyle мы ўбачым яе ў px. Гэта значыць па суті мы атрымліваем не зададзеную шырыню, а вылічаную. Глядзіце ў наступным прыкладзе:

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

Глядзіце таксама