فئة عنصر HTML DOM
❮ عنصر العنصرمثال
قم بتعيين سمة الفئة لعنصر:
element.className = "myStyle";
احصل على سمة الفئة "myDIV":
let value = document.getElementById("myDIV").className;
التبديل بين اسمي فئة:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
المزيد من الأمثلة أدناه.
التعريف والاستخدام
تقوم classNameالخاصية بتعيين أو إرجاع سمة فئة العنصر.
بناء الجملة
إرجاع خاصية className:
HTMLElementObject.className
قم بتعيين خاصية className:
HTMLElementObject.className = class
قيم الملكية
| Value | Description |
| class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
قيمة الإرجاع
| Type | Description |
| String | The class, or a space-separated list of classes, of an element |
مزيد من الأمثلة
احصل على سمة class لعنصر <div> الأول (إن وجد):
let value = document.getElementsByTagName("div")[0].className;
احصل على سمة فئة مع فئات متعددة:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
الكتابة فوق سمة فئة موجودة بأخرى جديدة:
element.className = "newClassName";
لإضافة فئات جديدة ، دون الكتابة فوق القيم الموجودة ، أضف مسافة والفئات الجديدة:
element.className += " class1 class2";
إذا كان "myDIV" يحتوي على فئة "myStyle" ، فغيّر حجم الخط:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
إذا قمت بتمرير 50 بكسل من أعلى هذه الصفحة ، تتم إضافة فئة "اختبار":
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
دعم المتصفح
element.classNameمدعوم في جميع المتصفحات:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
❮ عنصر العنصر