getComputedStyle-funktio

getComputedStyle-funktio mahdollistaa minkä tahansa elementin CSS-ominaisuuden arvon saamisen, jopa CSS-tiedostosta.

Syntaksi

let objekti = getComputedStyle(elementti);

Yksityiskohdat

Miten se toimii (huomio: ei kuten odotamme): parametrina funktio ottaa elementin, ja palauttaa objektin, joka sisältää kaikki annetun elementin CSS-ominaisuudet. Laitetaan tämä objekti muuttujaan style. Nimi on mielivaltainen, tämä on vain muuttuja - miten keksimme, niin viittaamme siihen:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style sisältää CSS-ominaisuudet

Esitetään esimerkiksi leveys. Tämä tehdään näin - style.width:

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

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

Esitettäessä esimerkiksi vasen padding - teemme näin - style.paddingLeft:

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

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

Seuraavassa esimerkissä esitämme kaikki meitä kiinnostavat CSS-ominaisuudet elementillemme:

<div id="elem">teksti</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // tulostaa '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // tulostaa '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // tulostaa 'solid'

getComputedStylen epätarkkuus

Joskus funktio getComputedStyle toimii ei aivan oikein leveyden ja korkeuden kanssa. Tämä johtuu siitä, että padding ja reunus laajentavat lohkoa. Seuraavassa esimerkissä lohkolle on asetettu leveys 200px, sekä reunus ja border. Lohkon todellinen leveys on 300px, mutta getComputedStyle tulostaa joka tapauksessa 200px:

<div id="elem">teksti</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // tulostaa '200px'
console.log('height: ' + style.height); // tulostaa '200px'

Eli: käy ilmi, että getComputedStyle jättää huomiotta lohkon laajenemisen ja näyttää sen koot sellaisina kuin laajenemista ei olisi. Mutta ei siinä kaikki: myös vierityspalkin läpi tai puute vaikuttavat - jotkut selaimet vähentävät vierityspalkin leveyden getComputedStyle:n kautta lasketusta leveydestä, ja jotkut eivät vähennä. Kaiken kaikkiaan tässä ei ole lainkaan cross-browser -yhteensopivaa ja on parempi olla käyttämättä getComputedStyle:ä leveyden ja korkeuden määrittämiseen, vaan käyttää metriikoita, joita opimme hieman myöhemmin.

Lasketut arvot

On vielä yksi vivahde: jos leveys on annettu % - niin getComputedStyle:n toiminnon jälkeen näemme sen px:nä. Eli olennaisesti emme saa annettua leveyttä, vaan lasketun. Katso seuraavaa esimerkkiä:

<div id="elem">teksti</div>

#elem {
	width: 30%; /* leveys annettu %-yksikössä */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // tulostaa leveyden px-yksikössä

Katso myös

ominaisuus cssText,
joka asettaa massa CSS-tyylejä