Функцијата getComputedStyle

Функцијата getComputedStyle овозможува да се добие вредноста на било кое CSS својство на елементот, дури и од CSS датотека.

Синтакса

javascriptlet objekt = getComputedStyle(element);

Детали

Како функционира (внимание: не како што очекуваме): како параметар функцијата прима елемент, а враќа објект, кој содржи во себе сите 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

Погледнете ги и