Hujjat (DOM)

Uslublar va klasslar

Elementga uslub berishning ikki asosiy yo'li bor: CSS klassi qo'shish yoki style orqali to'g'ridan-to'g'ri uslub yozish. Deyarli har doim klasslar afzal, style esa faqat klass "ojiz" bo'lgan holatlarda ishlatiladi. Ushbu darsda ikkalasini ham chuqur o'rganamiz.

Umumiy qoida: elementga qanday ko'rinishda bo'lishini xohlasangiz — buni CSS klasslari orqali qiling, JavaScript esa faqat klasslarni qo'shib-olib turadi. elem.style ni faqat klasslar bilan hal qilib bo'lmaydigan, dinamik hisoblangan qiymatlar uchun ishlating (masalan, koordinatalar).

className va classList

Klasslarni o'zgartirish — dasturlashda eng ko'p uchraydigan amallardan biridir.

elem.className

"class" atributiga to'liq mos keladi. Unga qiymat berish butun klasslar qatorini almashtiradi:

// <body class="main page">
let body = document.body;
alert(body.className); // main page

body.className = 'yangi';
// endi class="yangi", eski klasslar yo'qoldi

Eslatma: JavaScript'da class — bu zaxiralangan (reserved) kalit so'z, shuning uchun atribut nomi className deb o'zgartirilgan. Agar bittagina klassni almashtirsak yoki qo'shib-olib tursak, className noqulay — buning uchun classList bor.

elem.classList

classList — bu klasslarni birma-bir boshqarish uchun maxsus obyekt. Uning metodlari:

elem.classList.add('klass') — klass qo'shadi;
elem.classList.remove('klass') — klassni o'chiradi;
elem.classList.toggle('klass') — klass bo'lsa o'chiradi, bo'lmasa qo'shadi;
elem.classList.contains('klass') — klass bor-yo'qligini tekshiradi, true/false qaytaradi.

// <body class="main page">
let body = document.body;

body.classList.add('article');
// endi class="main page article"

body.classList.remove('page');
// endi class="main article"

alert(body.classList.contains('main')); // true

body.classList.toggle('active');
// 'active' yo'q edi, endi qo'shildi

Bundan tashqari, classList — bu iteratsiya qilinadigan (iterable) obyekt, shuning uchun barcha klasslarni for..of bilan aylanib chiqish mumkin:

// <body class="main page">
for (let name of document.body.classList) {
  alert(name); // avval 'main', keyin 'page'
}

togglega ikkinchi argument sifatida mantiqiy qiymat berish mumkin: elem.classList.toggle('klass', force). Agar force = true bo'lsa — har doim qo'shadi, false bo'lsa — har doim o'chiradi. Bu shartga qarab klassni yoqish/o'chirishda qulay.

element.style

elem.style — bu "style" atributiga mos keluvchi obyekt bo'lib, uning yordamida inline (satr ichidagi) uslublarni o'qish va yozish mumkin. Xususiyat nomi CSS'dan biroz farq qiladi.

Ko'p so'zli CSS xususiyatlari camelCase ko'rinishida yoziladi:

background-color  =>  elem.style.backgroundColor
z-index           =>  elem.style.zIndex
border-left-width =>  elem.style.borderLeftWidth

let doc = document.documentElement;
doc.style.background = 'red'; // <html> foni qizil bo'ladi

let elem = document.getElementById('elem');
elem.style.width = '150px';
elem.style.display = 'none'; // elementni yashiradi

Prefiksli xususiyatlar ham camelCase qoidasiga bo'ysunadi. Masalan, -moz-border-radius quyidagicha bo'ladi: elem.style.MozBorderRadius (defis o'rniga bosh harf, birinchi harf ham katta).

Xususiyatni tozalash

Ba'zan biror uslub xususiyatini olib tashlash kerak bo'ladi. Uni yashirish o'rniga, bo'sh qator berib to'liq tozalash mumkin:

// document.body.style.display = 'none' berilgan bo'lsin
document.body.style.display = ''; // xususiyat o'chiriladi
// endi element o'zining oddiy CSS holatiga qaytadi

Agar displayga bo'sh qator bersak, brauzer display uslubini xuddi hech qachon o'rnatilmagandek CSS klasslari bo'yicha qo'llaydi.

style.cssText bilan to'liq qayta yozish

Odatda style.* bilan alohida xususiyatlarni beramiz, chunki bu boshqalarini o'chirmaydi. Agar butun uslub qatorini bir vaqtda berish kerak bo'lsa, style.cssText ishlatiladi:

let div = document.getElementById('div');

// bu yerda butun style atributini bir qatorda yozamiz
div.style.cssText = 'color: red !important;\n                    background-color: yellow;\n                    width: 100px;\n                    text-align: center;';

cssTextga qiymat berish avvalgi barcha inline uslublarni butunlay almashtiradi, faqat qo'shmaydi. Shuning uchun undan mavjud muhim uslublarni tasodifan o'chirib yubormaslikka ehtiyot bo'ling.

Xuddi shu natijaga div.setAttribute('style', '...') orqali ham erishish mumkin — u ham butun style atributini almashtiradi.

O'lchov birliklarini unutmang

JavaScript'da CSS uslub qiymatlarini o'rnatishda o'lchov birliklarini qo'shishni unutmaslik kerak. Masalan, elem.style.topga '10' berish ishlamaydi — '10px' deyish kerak, aks holda qiymat e'tiborga olinmaydi:

let elem = document.getElementById('elem');

elem.style.top = 10;    // ISHLAMAYDI! (birlik yo'q)
elem.style.top = '10px'; // to'g'ri
elem.style.margin = '20px'; // to'g'ri

Bu juda ko'p uchraydigan xato. Brauzer noto'g'ri qiymatni jimgina e'tiborsiz qoldiradi, shuning uchun xato darrov ko'rinmasligi mumkin. Har doim birlik (px, %, em va h.k.) qo'shing.

getComputedStyle bilan hisoblangan uslublarni o'qish

style faqat inline uslublar bilan ishlaydi. U CSS klasslaridan kelgan uslublarni ko'rmaydi:

<style> body { color: red; } </style>
<script>
  alert(document.body.style.color); // bo'sh! (klassdagi uslub ko'rinmaydi)
</script>

Elementga haqiqatan qo'llanilgan yakuniy uslubni (CSS + inline + irsiy hisoblab) o'qish uchun getComputedStyle ishlatiladi:

let computedStyle = getComputedStyle(element, [pseudo]);

element — qiymatlari o'qiladigan element;
pseudo — psevdo-element kerak bo'lsa, masalan '::before' (ixtiyoriy).

<style> body { color: red; margin: 5px; } </style>
<script>
  let computedStyle = getComputedStyle(document.body);

  alert(computedStyle.marginTop); // 5px
  alert(computedStyle.color);     // rgb(255, 0, 0)
</script>

Ikki muhim jihat mavjud:

Hisoblangan (computed) qiymat — CSS qoidalari va irsiyat qo'llangandan keyingi qiymat, masalan height: 1em yoki font-size: 125%;
Yechilgan (resolved) qiymat — nihoyat aniq birlikda qat'iy qilingan qiymat, masalan height: 20px, font-size: 16px. Zamonaviy brauzerlar odatda yechilgan (pikselli) qiymatlarni qaytaradi.

getComputedStylega to'liq (aniq) xususiyat nomi kerak: paddingLeft, marginTop, borderTopWidth kabi. Qisqartma xususiyatlar (masalan, faqat padding yoki margin) turli brauzerlarda noaniq natija berishi mumkin — ulardan qochish tavsiya etiladi.

getComputedStyle qaytargan qiymatlar faqat o'qish uchundir — ularni o'zgartirib bo'lmaydi. Element uslubini o'zgartirish uchun elem.style yoki klasslar ishlatiladi.

:visited psevdo-klassidan olingan uslublar (masalan, tashrif buyurilgan havolaning rangi) getComputedStyle orqali yashiriladi — bu maxfiylik (privacy) himoyasidir, foydalanuvchi qaysi saytlarga kirganini JavaScript aniqlay olmasin uchun.

Xulosa

Klasslarni boshqarish:

className — butun klass qatori (string sifatida);
classList — bitta klass bilan ishlash: add, remove, toggle, contains; u iterable.

Uslublarni boshqarish:

elem.style — inline uslublar obyekti (xususiyatlar camelCase);
elem.style.cssText — butun inline uslubni bir qatorda o'qish/yozish;
getComputedStyle(elem) — yakuniy, haqiqatda qo'llangan uslublarni o'qish (faqat o'qish uchun).

Amaliy maslahat: imkon qadar klasslar orqali uslub bering, styleni esa faqat dinamik, hisoblab topiladigan qiymatlar uchun ishlating. O'lchov birliklarini unutmang!