GetComputedStyle funksiyasi

getComputedStyle funksiyasi elementning istalgan CSS xususiyati qiymatini, hatto CSS faylidagini ham olish imkonini beradi.

Sintaksis

javascriptlet obyekt = getComputedStyle(element);

Tafsilotlar

U qanday ishlaydi (diqqat: biz kutgandek emas): funktsiya parametri sifatida elementni qabul qiladi, va uzatilgan elementning barcha CSS xususiyatlarini o'z ichiga olgan obyektni qaytaradi. Keling, bu obyektni style o'zgaruvchisiga joylaymiz. Nomi ixtiyoriy, bu shunchaki o'zgaruvchi - qanday o'ylasak, shunday murojaat qilamiz:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style da CSS xususiyatlari yotadi

Keling, masalan, kenglikni chiqaramiz. Buning uchun style.width qilamiz:

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

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

Chiqarish uchun, masalan, chap padding - style.paddingLeft qilamiz:

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

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

Quyidagi misolda biz o'zimizni qiziqtirgan barcha CSS xususiyatlarini chiqaramiz:

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

GetComputedStyle ning aniq emasligi

Ba'zan getComputedStyle funksiyasi kenglik va balandlik bilan to'liq to'g'ri ishlamaydi. Buning sababi, padding va chegaralar blokni kengaytiradi. Quyidagi misolda blokka 200px kenglik, shuningdek chegaralar va border berilgan. Blokning haqiqiy kengligi 300px, lekin getComputedStyle baribir 200px qiymatini chiqaradi:

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

Ya'ni: ma'lum bo'ladiki, getComputedStyle blokning kengayishini e'tiborsiz qoldiradi va uning o'lchamlarini go'yo bu kengayish bo'lmagandek ko'rsatadi. Lekin bu hammasi emas: aynan skrol qatori mavjudligi ham muhim - ba'zi brauzerlar skrol qatori kengligini getComputedStyle orqali hisoblangan kenglikdan ayiradi, ba'zilari esa ayirmaydi. Umuman olganda, bu erda butunlay brauzerlararo emas va kenglik va balandlikni aniqlash uchun getComputedStyle dan foydalanmaslik yaxshiroq, buning o'rniga biz keyinroq o'rganadigan metrikalardan foydalanish kerak.

Hisoblangan qiymatlar

Yana bir nuans bor: agar kenglik % da berilgan bo'lsa - getComputedStyle ishlagandan keyin biz uni px da ko'ramiz. Ya'ni aslida biz berilgan kenglikni emas, balki hisoblangan kenglikni olamiz. Quyidagi misolga qarang:

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

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

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // kenglikni px da chiqaradi

Shuningdek qarang