Функција getComputedStyle

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

Синтакса

javascriptlet objekat = 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

Видите такође