className
Misol
Element uchun class atributini o‘rnating:
element.className = "myStyle";
O‘zingiz sinab ko‘ring »
"myDIV" elementining class atributini oling:
let value = document.getElementById("myDIV").className;
O‘zingiz sinab ko‘ring »
Ikki klass nomini navbatma-navbat almashtiring:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
className xususiyati elementning class atributini o‘rnatadi yoki qaytaradi.
Shuningdek qarang:
Sintaksis
className xususiyatini qaytarish:
HTMLElementObject.className
className xususiyatini o‘rnatish:
HTMLElementObject.className = class
Xususiyat qiymatlari
| Qiymat | Tavsif |
| class | Elementning klass nomi (nomlari). Bir nechta klassni bo‘sh joy bilan ajrating, masalan: "test demo". |
Qaytariladigan qiymat
| Tip | Tavsif |
| String | Elementning klassi yoki bo‘sh joy bilan ajratilgan klasslar ro‘yxati |
Ko‘proq misollar
Birinchi <div> elementining class atributini oling (agar mavjud bo‘lsa):
let value = document.getElementsByTagName("div")[0].className;
O‘zingiz sinab ko‘ring »
Bir nechta klassga ega class atributini oling:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
O‘zingiz sinab ko‘ring »
Mavjud class atributini yangisi bilan qayta yozing:
element.className = "newClassName";
O‘zingiz sinab ko‘ring »
Mavjud qiymatlarni qayta yozmasdan yangi klasslar qo‘shish uchun bo‘sh joy va yangi klasslarni qo‘shing:
element.className += " class1 class2";
O‘zingiz sinab ko‘ring »
Agar "myDIV" elementida "myStyle" klassi bo‘lsa, shrift o‘lchamini o‘zgartiring:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
O‘zingiz sinab ko‘ring »
Agar ushbu sahifani yuqoridan 50 piksel pastga aylantirsangiz, "test" klassi qo‘shiladi:
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
element.className barcha brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | Ha |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!