A getComputedStyle függvény

A getComputedStyle függvény lehetővé teszi egy elem bármely CSS tulajdonságának értékének megszerzését, akár CSS fájlból is.

Szintaxis

javascriptlet objektum = getComputedStyle(elem);

Részletek

Hogyan működik (figyelem: nem úgy, ahogy elvárnánk): paraméterként egy elemet fogad, és visszaad egy objektumot, amely magában foglalja az átadott elem összes CSS tulajdonságát. Tegyük ezt az objektumot egy style változóba. A név tetszőleges, ez csak egy változó - ahogy kitaláljuk, úgy fogunk hivatkozni rá:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // a style tartalmazza a CSS tulajdonságokat

Vegyük például a szélességet. Ezt így tehetjük meg - style.width:

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

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

A bal oldali padding megjelenítéséhez - így tehetjük meg - style.paddingLeft:

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

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

A következő példában kiírjuk az elemünk számára érdekes összes CSS tulajdonságot:

html<div id="elem">szöveg</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); // kiírja '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // kiírja '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // kiírja 'solid'

A getComputedStyle pontatlansága

Időnként a getComputedStyle függvény nem teljesen korrekten működik a szélességgel és magassággal. Ez annak köszönhető, hogy a padding és a szegély kiterjeszti a blokkot. A következő példában a blokk szélessége 200px, valamint van szegély és border. A blokk valódi szélessége 300px, de a getComputedStyle így is 200px-t fog kiírni:

html<div id="elem">szöveg</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); // kiírja '200px'
console.log('height: ' + style.height); // kiírja '200px'

Azaz: kiderül, hogy a getComputedStyle figyelmen kívül hagyja a blokk kiterjesztését és a méreteit úgy mutatja, mintha ez a kiterjesztés nem is létezne. De ez még nem minden: számít a görgetősáv jelenléte vagy hiánya is - egyes böngészők kivonják a görgetősáv szélességét a getComputedStyle által számolt szélességből, mások nem vonják ki. Röviden, itt egyáltalán minden nem keresztható és jobb, ha a getComputedStyle-t szélesség és magasság meghatározására nem használjuk, hanem a metrikákat használjuk, amelyeket alább tanulmányozunk.

Számított értékek

Van még egy árnyalat: ha a szélesség %-ban van megadva - akkor a getComputedStyle működése után px-ben fogjuk látni. Azaz lényegében nem a megadott szélességet kapjuk, hanem a számítottat. Nézze meg a következő példát:

html<div id="elem">szöveg</div>

css#elem {
  width: 30%; /* szélesség %-ban megadva */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // kiírja a szélességet px-ben

Lásd még