Funkcija getComputedStyle

Funkcija getComputedStyle omogućava da dobijete vrednost bilo kog CSS svojstva elementa, čak i iz CSS fajla.

Sintaksa

javascriptlet objekat = getComputedStyle(element);

Detalji

Kako radi (pažnja: ne onako kako očekujemo): parametrom funkcija prihvata element, a vraća objekat, koji u sebi sadrži sva CSS svojstva prosleđenog elementa. Hajde da stavimo taj objekat u promenljivu style. Naziv je proizvoljan, ovo je samo promenljiva - kako smislimo, tako ćemo i da pristupamo:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // u style se nalaze CSS svojstva

Hajde da prikažemo, na primer, širinu. To se radi ovako - style.width:

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

Da biste prikazali, na primer, levi padding - radimo ovako - style.paddingLeft:

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

U sledećem primeru prikazaćemo sva CSS svojstva koja nas zanimaju za naš element:

html<div id="elem">tekst</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); // prikazaće '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // prikazaće '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // prikazaće 'solid'

Netačnost getComputedStyle

Ponekad funkcija getComputedStyle radi ne sasvim ispravno sa širinom i visinom. To je povezano sa tim da padding i granica proširuju blok. U sledećem primeru bloku je zadata širina 200px, kao i granica i border. Stvarna širina bloka je 300px, ali getComputedStyle će svejedno prikazati 200px:

html<div id="elem">tekst</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); // prikazaće '200px'
console.log('height: ' + style.height); // prikazaće '200px'

Dakle: ispada da getComputedStyle zanemaruje proširenje bloka i pokazuje njegove dimenzije kao da tog proširenja nije bilo. Ali to još nije sve: takođe je bitno prisustvo ili odsustvo trake za pomeranje - neki brauzeri oduzimaju širinu trake za pomeranje od širine izračunate preko getComputedStyle, a neki ne oduzimaju. Ukratko, ovde uopšte sve nije više-brauzerski i bolje je getComputedStyle za određivanje širine i visine ne koristiti, već koristiti metrike, koje ćemo da izučimo malo niže.

Izračunate vrednosti

Postoji još jedan nijansa: ako je širina zadata u % - onda ćemo nakon rada getComputedStyle videti je u px. Dakle u suštini mi ne dobijamo zadatu širinu, već izračunatu. Pogledajte na sledećem primeru:

html<div id="elem">tekst</div>

css#elem {
  width: 30%; /* širina je zadata u % */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

javascriptlet elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // prikazaće širinu u px

Pogledajte takođe