Funksioni getComputedStyle

Funksioni getComputedStyle lejon marrjen e vlerës së çdo vetie CSS të një elementi, madje edhe nga skedari CSS.

Sintaksa

javascriptlet objekti = getComputedStyle(elementi);

Detaje

Si funksionon (kushtëzim: jo siç presim): si parametër funksioni pranon elementin, dhe kthen një objekt, i cili përmban në vetvete të gjitha vetitë CSS të elementit të transmetuar. Le ta vendosim këtë objekt në një ndryshore style. Emërtimi është arbitrar, ky është thjesht një ndryshore - si ta emërtojmë, ashtu do t'i referohemi:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // në style gjenden vetitë CSS

Le të shfaqim, për shembull, gjerësinë. Kjo bëhet kështu - style.width:

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

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

Për të shfaqur, për shembull, padding-in e majtë - bëjmë kështu - style.paddingLeft:

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

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

Në shembullin vijues do të shfaqim të gjitha vetitë CSS që na interesojnë për elementin tonë:

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); // do të shfaqë '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // do të shfaqë '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // do të shfaqë 'solid'

Pasaktësia e getComputedStyle

Ndonjëherë funksioni getComputedStyle funksionon jo krejtësisht korrekt me gjerësinë dhe lartësinë. Kjo lidhet me faktin se padding-i dhe kufiri zgjasin bllokun. Në shembullin vijues bllokut i është caktuar gjerësia 200px, si dhe kufiri dhe border. Gjerësia reale e bllokut është 300px, por getComputedStyle prapë do të shfaqë 200px:

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); // do të shfaqë '200px'
console.log('height: ' + style.height); // do të shfaqë '200px'

Pra: del se getComputedStyle injoron zgjerimin e bllokut dhe i tregon përmasat e tij sikur ky zgjerim nuk ka qenë. Por kjo nuk është e gjitha: gjithashtu ka rëndësi prania ose mungesa e shiritit të lëvizjes - disa shfletues heqin gjerësinë e shiritit të lëvizjes nga gjerësia e llogaritur përmes getComputedStyle, kurse disa nuk e heqin. Në përgjithësi këtu gjithçka nuk është kryq-shfletues dhe është më mirë të mos përdoret getComputedStyle për përcaktimin e gjerësisë dhe lartësisë, por të përdoren metrikat, të cilat do t'i studiojmë pak më poshtë.

Vlerat e Llogaritura

Ka edhe një nuancë: nëse gjerësia është caktuar në % - atëherë pas punës së getComputedStyle do ta shohim atë në px. Pra në thelb ne nuk marrim gjerësinë e caktuar, por atë të llogaritur. Shikoni shembullin vijues:

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

css#elem {
  width: 30%; /* gjerësia e caktuar në % */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // do të shfaqë gjerësinë në px

Shihni Gjithashtu