Funktionen getComputedStyle

Funktionen getComputedStyle gør det muligt at få værdien af enhver CSS egenskab for et element, selv fra en CSS-fil.

Syntaks

let objekt = getComputedStyle(element);

Detaljer

Sådan fungerer den (vær opmærksom: ikke som vi forventer): funktionen tager et element som parameter, og returnerer et objekt, som indeholder alle CSS egenskaber for det passede element. Lad os putte dette objekt i variablen style. Navnet er vilkårligt, det er blot en variabel - som vi finder på, sådan vil vi tilgå den:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style indeholder CSS egenskaber

Lad os f.eks. udskrive bredden. Dette gøres sådan - style.width:

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

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

For at udskrive f.eks. venstre padding - gør vi sådan - style.paddingLeft:

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

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

I det næste eksempel vil vi udskrive alle de CSS egenskaber der interesserer os for vores 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); // vil udskrive '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // vil udskrive '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // vil udskrive 'solid'

Unøjagtighed ved getComputedStyle

Undertiden fungerer funktionen getComputedStyle ikke helt korrekt med bredde og højde. Dette skyldes, at padding og kant udvider blokken. I det næste eksempel er blokken tildelt en bredde på 200px, samt en kant og border. Blokkens faktiske bredde er 300px, men getComputedStyle vil alligevel udskrive 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); // vil udskrive '200px'
console.log('height: ' + style.height); // vil udskrive '200px'

Det vil sige: det viser sig, at getComputedStyle ignorerer blokudvidelsen og viser dens størrelse som om denne udvidelse ikke var der. Men det er ikke alt: tilstedeværelsen eller fraværet af en scrollbar har også betydning - nogle browsere trækker bredden af scrollbaren fra bredden beregnet via getComputedStyle, mens andre ikke gør. Kort sagt, alt er overhovedet ikke cross-browser kompatibelt her, og det er bedre ikke at bruge getComputedStyle til at bestemme bredde og højde, men at bruge de metrikker, som vi vil lære lidt nedenfor.

Beregnede værdier

Der er endnu en nuance: hvis bredden er angivet i % - så efter getComputedStyle har virket, vil vi se den i px. Det vil sige, i bund og grund får vi ikke den angivne bredde, men den beregnede. Se følgende eksempel:

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

#elem {
	width: 30%; /* bredde angivet 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); // vil udskrive bredden i px

Se også

egenskaben cssText,
som massetildeler CSS-stilarter