Functie getComputedStyle

De functie getComputedStyle maakt het mogelijk om de waarde van elke CSS-eigenschap van een element te verkrijgen, zelfs vanuit een CSS-bestand.

Syntaxis

javascriptlet object = getComputedStyle(element);

Details

Hoe het werkt (let op: niet zoals we verwachten): de functie accepteert een element als parameter, en retourneert een object dat alle CSS-eigenschappen van het doorgegeven element bevat. Laten we dit object in een variabele stoppen style. De naam is willekeurig, het is gewoon een variabele - hoe we het bedenken, zo zullen we ernaar verwijzen:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // in style zitten de CSS-eigenschappen

Laten we bijvoorbeeld de breedte weergeven. Dit wordt gedaan zo - style.width:

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

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

Om bijvoorbeeld de linker padding weer te geven - doen we zo - style.paddingLeft:

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

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

In het volgende voorbeeld geven we alle CSS-eigenschappen die ons interesseren voor ons element weer:

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

Onnauwkeurigheid van getComputedStyle

Soms werkt de functie getComputedStyle niet helemaal correct met breedte en hoogte. Dit komt doordat padding en rand het blok uitbreiden. In het volgende voorbeeld heeft het blok een breedte van 200px, evenals een rand en border. De werkelijke breedte van het blok is 300px, maar getComputedStyle zal toch 200px weergeven:

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

Dat wil zeggen: het blijkt dat getComputedStyle de blokuitbreiding negeert en zijn afmetingen toont alsof deze uitbreiding er niet was. Maar dat is nog niet alles: de aan- of afwezigheid van een schuifbalk is ook van belang - sommige browsers trekken de breedte van de schuifbalk af van de breedte berekend via getComputedStyle, en anderen doen dat niet. Kortom, hier is alles absoluut niet cross-browser en het is beter om getComputedStyle niet te gebruiken voor het bepalen van breedte en hoogte, maar gebruik te maken van de metrieken die we iets later zullen bestuderen.

Berekende waarden

Er is nog een nuance: als de breedte is ingesteld in % - dan zullen we na de werking van getComputedStyle het zien in px. Dat wil zeggen, in feite krijgen we niet de ingestelde breedte, maar de berekende. Zie het volgende voorbeeld:

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

css#elem {
  width: 30%; /* breedte ingesteld in % */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // geeft de breedte in px weer

Zie ook