Funkcia getComputedStyle

Funkcia getComputedStyle umožňuje získať hodnotu akejkoľvek CSS vlastnosti elementu, dokonca aj z CSS súboru.

Syntax

let objekt = getComputedStyle(element);

Podrobnosti

Ako to funguje (pozor: nie tak, ako očakávame): parametrom funkcia prijíma element, a vracia objekt, ktorý obsahuje v sebe všetky CSS vlastnosti odovzdaného elementu. Uložme tento objekt do premennej style. Názov je ľubovoľný, je to len premenná - ako si vymyslíme, tak sa budeme odvolávať:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // v style ležia CSS vlastnosti

Vypíšme napríklad šírku. Robí sa to takto - style.width:

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

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

Ak chceme vypísať, napríklad ľavý padding - robíme takto - style.paddingLeft:

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

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

V nasledujúcom príklade vypíšeme všetky nás zaujímajúce CSS vlastnosti pre náš element:

<div id="elem">text</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); // vypíše '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // vypíše '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // vypíše 'solid'

Nepresnosť getComputedStyle

Niekedy funkcia getComputedStyle funguje nie úplne korektne so šírkou a výškou. Je to spôsobené tým, že padding a okraj rozširujú blok. V nasledujúcom príklade má blok zadanú šírku 200px, ako aj okraj a border. Reálna šírka bloku je 300px, ale getComputedStyle aj tak vypíše 200px:

<div id="elem">text</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); // vypíše '200px'
console.log('height: ' + style.height); // vypíše '200px'

To znamená: vychádza to tak, že getComputedStyle ignoruje rozšírenie bloku a zobrazuje jeho rozmery tak, ako keby toto rozšírenie nebolo. Ale to ešte nie je všetko: záleží aj na prítomnosti alebo neprítomnosti posuvníka - niektoré prehliadače odpočítavajú šírku posuvníka od šírky vypočítanej cez getComputedStyle, a niektoré neodpočítavajú. Všeobecne tu vôbec všetko nie je cross-browserovo kompatibilné a je lepšie getComputedStyle pre určenie šírky a výšky nepoužívať, a použiť metrikami, ktoré si preštudujeme nižšie.

Vypočítané hodnoty

Je tu ešte jeden nuans: ak je šírka zadaná v % - tak po práci getComputedStyle uvidíme ju v px. To znamená, že v podstate dostávame nie zadanú šírku, ale vypočítanú. Pozrite sa na nasledujúci príklad:

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

#elem {
	width: 30%; /* šírka zadaná v % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // vypíše šírku v px

Pozri tiež

vlastnosť cssText,
ktorá hromadne zadáva CSS štýly