Kazi getComputedStyle

Kazi getComputedStyle inaruhusu kupata thamani ya sifa yoyote ya CSS ya kipengele, hata kutoka kwa faili ya CSS.

Sintaksia

javascriptlet kitu = getComputedStyle(kipengele);

Maelezo zaidi

Inavyofanya kazi (makini: sio kama tulivyo tarajia): kigezo cha kazi kinakubali kipengele, na kurudisha kitu, ambacho kina sifa zote za CSS za kipengele kilichopitishwa. Wacha tuweke kitu hiki kwenye kutofautisha style. Jina ni la kiholela, hii ni kutofautisha tu - jinsi tutakavyoibua, ndivyo tutakavyojihusisha nayo:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // kwenye style kuna sifa za CSS

Wacha tutoe, kwa mfano, upana. Hii inafanywa hivi - style.width:

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

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

Ili kutoa, kwa mfano, padding wa kushoto - tunafanya hivi - style.paddingLeft:

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

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

Katika mfano ujao tutatoa sifa zote za CSS zinazotuvutia za kipengele chetu:

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

Kutokuwa sahihi kwa getComputedStyle

Wakati mwingine kazi getComputedStyle hufanya kazi sio sawa kabisa na upana na urefu. Hii inahusiana na ukweli kwamba padding na mpaka hupanua kizuizi. Katika mfano ujao kizuizi kimepewa upana wa 200px, na pia mpaka na border. Upana halisi wa kizuizi ni 300px, lakini getComputedStyle bado itatoa 200px:

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

Hiyo ni: inageuka kuwa getComputedStyle huipuuza upanuzi wa kizuizi na kuonyesha vipimo vyake kana kwamba huu upanuzi haukuwapo. Lakini hiyo si yote: pia ina maana uwepo au kutokuwepo kwa mstari wa kusokota - baadhi ya vivinjari hutoa upana wa mstari wa kusokota kutoka kwa upana, uliohesabiwa kupitia getComputedStyle, na baadhi haitoi. Kwa ujumla hapa kabisa sio ya kuvuka kivinjari na ni bora getComputedStyle kwa ajili ya kuamua upana na urefu isitumike, na kutumia metrik, ambazo tutazisoma chini kidogo.

Thamani Zilizohesabiwa

Kuna nuance nyingine: ikiwa upana umepewa kwa % - basi baada ya kazi ya getComputedStyle tutaona kwa px. Hiyo ni kimsingi hatupati upana uliowekwa, bali uliohesabiwa. Angalia katika mfano ujao:

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

css#elem {
  width: 30%; /* upana umepewa kwa % */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // itatoa upana kwa px

Angalia pia