Funktsioon getComputedStyle

Funktsioon getComputedStyle võimaldab saada mis tahes elemendi CSS-i omaduse väärtuse, isegi CSS-i failist.

Süntaks

javascriptlet objekt = getComputedStyle(element);

Üksikasjad

Kuidas see töötab (tähelepanu: mitte nii nagu me oodatame): parameetrina võtab funktsiooni element, ja tagastab objekti, mis sisaldab endas kõiki edastatud elemendi CSS-i omadusi. Paneme selle objekti muutujasse style. Nimetus on suvaline, see on lihtsalt muutuja - kuidas me välja mõtleme, nii ja me pöördumegi:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style-s on CSS-i omadused

Väljastame näiteks laiuse. See tehakse nii - style.width:

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

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

Et väljastada näiteks vasak padding - teeme nii - style.paddingLeft:

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

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

Järgmises näites väljastame kõik meid huvitavad CSS-i omadused meie elemendi jaoks:

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

GetComputedStyle ebatäpsus

Mõnikord funktsioon getComputedStyle töötab mitte päris korrektselt laiuse ja kõrgusega. See on seotud sellega, et padding ja piir laiendavad plokki. Järgmises näites on plokile määratud laius 200px, samuti piir ja border. Ploki tegelik laius on 300px, kuid getComputedStyle väljastab ikkagi 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); // väljastab '200px'
console.log('height: ' + style.height); // väljastab '200px'

See tähendab: selgub, et getComputedStyle ignoreerib ploki laienemist ja näitab selle mõõtmed nii, nagu seda laienemist poleks olnud. Kuid see pole veel kõik: samuti on oluline kerimisriba olemasolu või puudumine - mõned brauserid lahutavad kerimisriba laiuse getComputedStyle kaudu arvutatud laiusest, ja mõned ei lahuta. Üldiselt on siin üldse kõik mitte cross-browser ja parem on getComputedStyle laiuse ja kõrguse määramiseks mitte kasutada, vaid kasutada mõõdikuid, mida me õpime veidi allpool.

Arvutatud väärtused

On veel üks nüanss: kui laius on määratud % - siis pärast getComputedStyle töötamist näeme seda px-des. See tähendab sisuliselt me ei saa määratud laiust, vaid arvutatud. Vaadake järgmist näidet:

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

css#elem {
  width: 30%; /* laius määratud %-des */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // väljastab laiuse px-des

Vaata ka