Funktionen getComputedStyle

Funktionen getComputedStyle låter dig få värdet på valfri CSS-egenskap för ett element, även från en CSS-fil.

Syntax

let objekt = getComputedStyle(element);

Detaljer

Hur det fungerar (observera: inte som vi förväntar oss): funktionen tar ett element som parameter, och returnerar ett objekt som innehåller alla CSS-egenskaper för det skickade elementet. Låt oss lägga detta objekt i en variabel style. Namnet är godtyckligt, det är bara en variabel - vi kommer att använda det namn vi väljer:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style innehåller CSS-egenskaperna

Låt oss till exempel skriva ut bredden. Det görs så här - style.width:

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

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

För att skriva ut, till exempel, vänster padding - gör så här - style.paddingLeft:

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

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

I nästa exempel kommer vi att skriva ut alla CSS-egenskaper som intresserar oss för vårt 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); // skriver ut '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // skriver ut '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // skriver ut 'solid'

GetComputedStyle:s inexakthet

Ibland fungerar funktionen getComputedStyle inte helt korrekt med bredd och höjd. Detta beror på att padding och kant utökar blocket. I nästa exempel har blocket en bredd på 200px, samt en kantlinje och border. Blockets verkliga bredd är 300px, men getComputedStyle kommer ändå att skriva ut 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); // skriver ut '200px'
console.log('height: ' + style.height); // skriver ut '200px'

Det vill säga: det visar sig att getComputedStyle ignorerar blockutvidgningen och visar dess dimensioner som om denna utvidgning inte fanns. Men det är inte allt: närvaron eller frånvaron av en scrollbar spelar också roll - vissa webbläsare drar bort scrollbartens bredd från bredden beräknad via getComputedStyle, medan andra inte drar bort den. I allmänhet är allt här inte cross-browser kompatibelt och det är bättre att inte använda getComputedStyle för att bestämma bredd och höjd, utan att använda mått, som vi kommer att studera lite längre ner.

Beräknade värden

Det finns ytterligare en nyans: om bredden är angiven i % - så efter getComputedStyle kommer vi att se den i px. Det vill säga i grund och botten får vi inte den angivna bredden, utan den beräknade. Titta på nästa exempel:

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

#elem {
	width: 30%; /* bredd angiven i % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // skriver ut bredden i px

Se även

egenskapen cssText,
som massvis tilldelar CSS-stilar