Funkcija getComputedStyle

Funkcija getComputedStyle leidžia gauti bet kurios elemento CSS savybės reikšmę, net iš CSS failo.

Sintaksė

javascriptlet objektas = getComputedStyle(elementas);

Detalės

Kaip tai veikia (dėmesio: ne taip, kaip mes tikimės): parametru funkcija priima elementą, o grąžina objektą, kuriame yra visos perduoto elemento CSS savybės. Padėkime šį objektą į kintamąjį style. Pavadinimas savavališkas, tai tik kintamasis - kaip sugalvosime, taip ir kreipsimės:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style yra CSS savybės

Išveskime, pavyzdžiui, plotį. Tai daroma taip - style.width:

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

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

Norint išvesti, pavyzdžiui, kairįjį padding - darome taip - style.paddingLeft:

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

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

Šiame pavyzdyje išvesime visas mums įdomias CSS savybes mūsų elementui:

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

GetComputedStyle netikslumas

Kartais funkcija getComputedStyle veikia ne visai korektiškai su plotiu ir aukščiu. Tai susiję su tuo, kad padding ir sienelė išplečia bloką. Šiame pavyzdyje blokui nustatytas plotis 200px, taip pat sienelė ir border. Tikrasis bloko plotis 300px, bet getComputedStyle vis tiek išves 200px:

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

Tai yra: pasirodo, kad getComputedStyle ignoruoja bloko išplėtimą ir rodo jo matmenis taip, tarsi šio išplėtimo nebūtų. Bet tai dar ne viskas: taip pat turi reikšmės slinkties juostos buvimas ar nebuvimas - kai kurios naršyklės atima slinkties juostos plotį nuo pločio, apskaičiuoto per getComputedStyle, o kai kurios neatima. Apskritai čia visai ne kryžminė naršyklė ir geriau getComputedStyle pločio ir aukščio nustatymui nenaudoti, o naudotis metrikomis, kurias išnagrinėsime šiek tiek vėliau.

Apskaičiuotos reikšmės

Yra dar vienas niuansas: jei plotis nustatytas % - tai po getComputedStyle veikimo pamatysime jį px. Tai iš esmės mes gauname ne nustatytą plotį, o apskaičiuotą. Pažiūrėkite šiame pavyzdyje:

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

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

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // išves plotį px

Taip pat žiūrėkite