classList
Misol
Elementga "myStyle" klassini qo‘shing:
const list = element.classList;
list.add("myStyle");
O‘zingiz sinab ko‘ring »
Elementdan "myStyle" klassini olib tashlang:
const list = element.classList;
list.remove("myStyle");
O‘zingiz sinab ko‘ring »
"myStyle" klassini yoqib-o‘chiring (toggle):
const list = element.classList;
list.toggle("myStyle");
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
classList xususiyati elementning CSS klass nomlarini qaytaradi.
classList xususiyati DOMTokenList qaytaradi.
Shuningdek qarang:
Sintaksis
element.classList
Qaytariladigan qiymat
| Tip | Tavsif |
| Object | DOMTokenList. Elementning klass nomlari ro‘yxati. |
Eslatma
classList xususiyati faqat o‘qish uchun, ammo ro‘yxatdagi CSS klasslarini qo‘shish, yoqib-o‘chirish (toggle) yoki olib tashlash uchun quyida keltirilgan metodlardan foydalanishingiz mumkin:
classList xususiyatlari va metodlari
| Nomi | Tavsif |
|---|---|
| add() | Ro‘yxatga bir yoki bir nechta token qo‘shadi |
| contains() | Ro‘yxatda klass mavjud bo‘lsa, true qaytaradi |
| entries() | Ro‘yxatdagi kalit/qiymat juftliklariga ega Iterator qaytaradi |
| forEach() | Ro‘yxatdagi har bir token uchun callback funksiyasini bajaradi |
| item() | Ko‘rsatilgan indeksdagi tokenni qaytaradi |
| keys() | Ro‘yxatdagi kalitlarga ega Iterator qaytaradi |
| length | Ro‘yxatdagi tokenlar sonini qaytaradi |
| remove() | Ro‘yxatdan bir yoki bir nechta tokenni olib tashlaydi |
| replace() | Ro‘yxatdagi tokenni almashtiradi |
| supports() | Token atribut qo‘llab-quvvatlaydigan tokenlardan biri bo‘lsa, true qaytaradi |
| toggle() | Ro‘yxatdagi tokenlarni navbatma-navbat qo‘shadi yoki olib tashlaydi (toggle) |
| value | Tokenlar ro‘yxatini string sifatida qaytaradi |
| values() | Ro‘yxatdagi qiymatlarga ega Iterator qaytaradi |
Ko‘proq misollar
Elementga bir nechta klass qo‘shing:
element.classList.add("myStyle", "anotherClass", "thirdClass");
O‘zingiz sinab ko‘ring »
Elementdan bir nechta klassni olib tashlang:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
O‘zingiz sinab ko‘ring »
"myDIV" elementining klass nomlarini oling:
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
O‘zingiz sinab ko‘ring »
Elementning birinchi klassini oling:
let className = element.classList.item(0);
O‘zingiz sinab ko‘ring »
Elementda "myStyle" klassi bormi?
let x = element.classList.contains("myStyle");
O‘zingiz sinab ko‘ring »
Agar elementda "myStyle" klassi bo‘lsa, "anotherClass" klassini olib tashlang.
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
O‘zingiz sinab ko‘ring »
Ochiladigan menyu (dropdown) tugmasini yaratish uchun klasslarni navbatma-navbat almashtiring:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
O‘zingiz sinab ko‘ring »
Yopishqoq (sticky) navigatsiya panelini yarating:
// Get the navbar
const navbar = document.getElementById("navbar");
// Get the offset position of the navbar
const sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position
// Remove it when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
element.classList barcha brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Ha | 10-11 | Ha | Ha | Ha | Ha |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!