Die funksie getComputedStyle

Die funksie getComputedStyle laat toe om die waarde van enige CSS eienskap van 'n element te kry, selfs vanuit 'n CSS lêer.

Sintaksis

javascriptlet voorwerp = getComputedStyle(element);

Besonderhede

Hoe dit werk (let op: nie soos ons verwag nie): die funksie neem die element as parameter, en gee 'n voorwerp terug wat al die CSS eienskappe van die oorgedraagde element bevat. Kom ons plaas hierdie voorwerp in die veranderlike style. Die naam is arbitrêr, dit is net 'n veranderlike - soos ons dit bedink, so sal ons dit aanspreek:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style bevat die CSS eienskappe

Kom ons toon, byvoorbeeld, die breedte. Dit word gedoen so - style.width:

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

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

Om, byvoorbeeld, die linker padding te toon - doen dit so - style.paddingLeft:

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

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

In die volgende voorbeeld sal ons al die CSS eienskappe wat ons in belangstel vir ons element toon:

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

Ongeskiktheid van getComputedStyle

Soms werk die funksie getComputedStyle nie heeltemal korrek met breedte en hoogte nie. Dit hou verband daarmee dat padding en die rand die blok uitbrei. In die volgende voorbeeld het die blok 'n breedte van 200px, sowel as 'n rand en border. Die werklike breedte van die blok is 300px, maar getComputedStyle sal nog steeds 200px toon:

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

Dit wil sê: dit blyk dat getComputedStyle die uitbreiding van die blok ignoreer en sy afmetings toon asof hierdie uitbreiding nie daar was nie. Maar dit is nog nie alles nie: die teenwoordigheid of afwesigheid van 'n rolbal is ook van belang - sommige blaaiers trek die breedte van die rolbal af van die breedte bereken via getComputedStyle, en ander trek dit nie af nie. Oor die algemeen is hier alles nie kruisblaaiervriendelik nie en dit is beter om getComputedStyle nie te gebruik om breedte en hoogte te bepaal nie, maar om die metrieke te gebruik wat ons 'n bietjie later sal bestudeer.

Berekende waardes

Daar is nog 'n fyn punt: as die breedte gestel is in % - dan sal ons na die werking van getComputedStyle dit sien in px. Dit wil sê in wese kry ons nie die gestelde breedte nie, maar die berekende een. Kyk na die volgende voorbeeld:

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

css#elem {
  width: 30%; /* breedte gestel 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); // sal die breedte in px toon

Sien ook