Funkcija getComputedStyle

Funkcija getComputedStyle omogoča pridobitev vrednosti katere koli CSS lastnosti elementa, tudi iz CSS datoteke.

Sintaksa

javascriptlet objekt = getComputedStyle(element);

Podrobnosti

Kako deluje (pozor: ne tako, kot pričakujemo): kot parameter funkcija sprejme element, in vrne objekt, ki vsebuje vse CSS lastnosti posredovanega elementa. Dajmo ta objekt postaviti v spremenljivko style. Ime je poljubno, to je le spremenljivka - kakor si izmislimo, tako se bomo nanjo sklicevali:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // v style so CSS lastnosti

Izpišimo na primer širino. To naredimo tako - style.width:

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

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

Za izpis, na primer, levega padding - naredimo takole - style.paddingLeft:

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

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

V naslednjem primeru bomo izpisali vse zanimive CSS lastnosti za naš element:

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); // bo izpisal '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // bo izpisal '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // bo izpisal 'solid'

Nenatančnost getComputedStyle

Včasih funkcija getComputedStyle deluje ne povsem pravilno s širino in višino. To je povezano z dejstvom, da padding in obroba razširita blok. V naslednjem primeru je bloku določena širina 200px, pa tudi obroba in border. Dejanska širina bloka je 300px, vendar bo getComputedStyle vseeno izpisal 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); // bo izpisal '200px'
console.log('height: ' + style.height); // bo izpisal '200px'

To pomeni: izkaže se, da getComputedStyle ignorira razširitev bloka in prikazuje njegove dimenzije, kot da te razširitve ne bi bilo. A to še ni vse: pomembna je tudi prisotnost ali odsotnost drsnika - nekateri brskalniki odštejejo širino drsnika od širine, izračunane preko getComputedStyle, nekateri pa ne odštejejo. Skratka, tukaj je na splošno vse ne cross-browser in bolje je, da getComputedStyle za določanje širine in višine ne uporabljamo, ampak uporabimo metrike, ki jih bomo spoznali malo kasneje.

Izračunane vrednosti

Obstaja še en odtenek: če je širina določena v % - potem bomo po delu getComputedStyle videli jo v px. To pomeni, da v bistvu ne dobimo nastavljene širine, ampak izračunano. Poglejte v naslednjem primeru:

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

css#elem {
  width: 30%; /* širina določena v % */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // bo izpisal širino v px

Glejte tudi