getComputedStyle Funksiýasy

getComputedStyle funksiýasy element-iň islendik CSS aýratynlygynyň bahasyny alyp bermege, hat-da CSS faýlyndan hem mümkinçilik berýär.

Sintaksis

javascriptlet obyekt = getComputedStyle(element);

Jikme-jiklikler

Ol nähili işleýär (üns beriň: biz gözleýşimiz ýaly däl): funksiýa parametr hökmünde elementi alýar, we gaýtarylan element-iň ähli CSS aýratynlyklaryny öz içine alýan bir obyekti gaýtarýar. Geliň bu obyekti style üýtgeýjisine goýalyň. Ady hökmany däl, bu diňe bir üýtgeýji - biz nädip döredýän bolsak, şeýle-de ýüz tutarys:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style-da CSS aýratynlyklary ýatýar

Geliň, mysal üçin, ini alyp göreliň. Bu edil şeýle edilýär - style.width:

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

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

Mysal üçin, çep padding -i alyp görkezmek üçin - şeýle edýäris - style.paddingLeft:

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

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

Indiki mysalda biziň elementimiz üçin biziň gyzyklanýan ähli CSS aýratynlyklaryny alyp görkezeris:

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

css#elem {
  ini: 200px;
  beýikligi: 200px;
  padding: 30px;
  çäg: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // '30px' görkezer
console.log('borderTopWidth: ' + style.borderTopWidth); // '20px' görkezer
console.log('borderTopStyle: ' + style.borderTopStyle); // 'solid' görkezer

getComputedStyle-iň takyk däl ligi

Käwagtlar getComputedStyle funksiýasy ini we beýiklik bilen doly takyk işlemeýär. Bu padding we çäg-iň blogy giňeldýändigi bilen baglanyşykly. Indiki mysalda bloga 200px ini berlen, şeýle hem çäg we border. Bloguň hakyky ini 300px, ýöne getComputedStyle ýene-de 200px görkezer:

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

css#elem {
  ini: 200px;
  beýikligi: 200px;
  padding: 30px;
  çäg: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('ini: ' + style.ini); // '200px' görkezer
console.log('beýikligi: ' + style.beýikligi); // '200px' görkezer

Ýagny: getComputedStyle blogyň giňelmegine üns bermeýär we onuň ölçeglerini bu giňelme ýok ýaly görkezýär. Ýöne bu heniz hemme zat däl: şeýle hem aýlaw zolagynyň bolmagy ýa-da bolmazy hem ähmýetlidir - käbir brauzerler aýlaw zolagynyň ini getComputedStyle arkaly hasaplanan ini-den çykarýar, käbirleri bolsa çykarmaýar. Umuman bu ýerde hemme zat transbrauzer däl we getComputedStyle ini we beýikligi anyklamak üçin ulanylmak has gowydyr, metric-leri ulanmaly, biz olary azajyk aşakda öwreneris.

Hasaplanan bahalar

Ýene bir nýuans bar: eger ini % -da berlen bolsa - onda getComputedStyle işinden soň biz onu px -da göreris. Ýagny esasan biz berlen ini däl-de, hasaplanan ini alýarys. Indiki mysala serediň:

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

css#elem {
  ini: 30%; /* ini % -da berildi */
  beýikligi: 200px;
  padding: 30px;
  çäg: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('ini: ' + style.ini); // ini-ni px -da görkezer

Şeýle-de serediň