Funkce getComputedStyle

Funkce getComputedStyle umožňuje získat hodnotu jakékoli CSS vlastnosti elementu, dokonce i z CSS souboru.

Syntaxe

let objekt = getComputedStyle(prvek);

Podrobnosti

Jak to funguje (pozor: ne tak, jak očekáváme): parametrem funkce přijímá element, a vrací objekt, který obsahuje všechny CSS vlastnosti předaného elementu. Pojďme tento objekt uložit do proměnné style. Název je libovolný, je to jen proměnná - jak ji vymyslíme, tak se budeme odkazovat:

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

Pojďme vypsat, například, šířku. To se dělá takto - style.width:

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

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

Chcete-li vypsat, například, levý padding - uděláme takto - style.paddingLeft:

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

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

V následujícím příkladu vypíšeme všechny nás zajímající CSS vlastnosti pro 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'

Nepřesnost getComputedStyle

Někdy funkce getComputedStyle pracuje ne zcela korektně se šířkou a výškou. To souvisí s tím, že padding a okraj rozšiřují blok. V následujícím příkladu má blok nastavenou šířku 200px, a také okraj a border. Skutečná šířka bloku je 300px, ale getComputedStyle stejně 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á: ukazuje se, že getComputedStyle ignoruje rozšíření bloku a ukazuje jeho rozměry tak, jako by toto rozšíření nebylo. Ale to ještě není všechno: také záleží na přítomnosti nebo nepřítomnosti posuvníku - některé prohlížeče odečítají šířku posuvníku od šířky vypočtené pomocí getComputedStyle, a některé neodečítají. Zkrátka tady vůbec vše není cross-browser a je lepší getComputedStyle pro určení šířky a výšky nepoužívat, a používat metriky, které se naučíme o něco dále.

Vypočtené hodnoty

Existuje ještě jeden nuance: pokud je šířka nastavena v % - tak po práci getComputedStyle uvidíme ji v px. To znamená, že v podstatě nedostáváme nastavenou šířku, ale vypočtenou. Podívejte se na následující příklad:

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

#elem {
	width: 30%; /* šířka nastavena 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 šířku v px

Viz také

vlastnost cssText,
které hromadně nastavuje CSS styly