Funksjonen getComputedStyle

Funksjonen getComputedStyle lar deg få verdien til enhver CSS-egenskap for et element, selv fra en CSS-fil.

Syntaks

javascriptlet objekt = getComputedStyle(element);

Detaljer

Hvordan det fungerer (merk: ikke slik vi forventer): funksjonen tar et element som parameter, og returnerer et objekt som inneholder alle CSS-egenskapene til det overførte elementet. La oss putte dette objektet i en variabel style. Navnet er vilkårlig, dette er bare en variabel - vi kan kalle den hva vi vil, og bruke den slik:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style inneholder CSS-egenskapene

La oss for eksempel skrive ut bredden. Dette gjøres slik - style.width:

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

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

For å skrive ut, for eksempel, venstre padding - gjør vi slik - style.paddingLeft:

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

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

I det neste eksemplet skriver vi ut alle CSS-egenskapene vi er interessert i for vårt element:

html<div id="elem">text</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); // vil skrive ut '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // vil skrive ut '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // vil skrive ut 'solid'

Unøyaktighet hos getComputedStyle

Noen ganger fungerer funksjonen getComputedStyle ikke helt korrekt med bredde og høyde. Dette skyldes at padding og kant utvider boksen. I det neste eksemplet er boksen gitt en bredde på 200px, i tillegg til kant og border. Den virkelige bredden på boksen er 300px, men getComputedStyle vil likevel skrive ut 200px:

html<div id="elem">text</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); // vil skrive ut '200px'
console.log('height: ' + style.height); // vil skrive ut '200px'

Det vil si: det viser seg at getComputedStyle ignorerer utvidelsen av boksen og viser dens dimensjoner som om denne utvidelsen ikke var der. Men det er ikke alt: tilstedeværelsen eller fraværet av en rulleist spiller også en rolle - noen nettlesere trekker bredden på rullelisten fra bredden beregnet via getComputedStyle, og noen gjør ikke det. Kort fortalt, alt er her ikke tverrbrowserkompatibelt, og det er bedre å ikke bruke getComputedStyle for å bestemme bredde og høyde, men å bruke metrikkene som vi vil lære litt nedenfor.

Beregnede verdier

Det er en nyanse til: hvis bredden er satt i % - så etter at getComputedStyle har jobbet vil vi se den i px. Det vil si i hovedsak får vi ikke den angitte bredden, men den beregnede. Se på det neste eksemplet:

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

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

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

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

Se også