خصائص classList لمكونات DOM HTML

التعريف والاستخدام

classList الخصائص تعود أسماء الفئات للعنصر.

classList الخصائص تعود DOMTokenList.

مثال

مثال 1

إضافة فئة "myStyle" إلى العنصر

const list = element.classList;
list.add("myStyle");

جربها بنفسك

مثال 2

إزالة فئة "myStyle" من العنصر

const list = element.classList;
list.remove("myStyle");

جربها بنفسك

مثال 3

تغيير حالة "myStyle": مفتوح/مغلق

const list = element.classList;
list.toggle("myStyle");

جربها بنفسك

إشارة:يقدم المزيد من الأمثلة في نهاية الصفحة.

النص

العنصر.classList

القيمة المعدة

النوع الوصف
المعادلة DOMTokenList. قائمة أسماء الفئات للعنصر.

ملاحظة:خصائص classList غير قابل للتعديل، ولكن يمكنك استخدام الطرق المذكورة أدناه لإضافة، تغيير أو إزالة فئات CSS من القائمة:

خصائص ومتغيرات classList

الاسم الوصف
add() إضافة رمز أو عدة رموز إلى القائمة.
contains() إذا كانت القائمة تحتوي على فئة، فإنها تعود true.
entries() من قائمة العناصر يعود الم迭代ر الذي يحتوي على المفتاح/القيمة.
forEach() تنفيذ دالة التكرار لللفظ في القائمة.
item() العودة إلى اللفظ في الموقع المحدد.
keys() العودة إلى معادلة التكرار التي تحتوي على المفاتيح في القائمة.
length العودة إلى عدد اللفظ في القائمة.
remove() إزالة لفظ واحد أو أكثر من القائمة.
replace() استبدال اللفظ في القائمة.
supports() إذا كان اللفظ دعماً للفئة المطلوبة، العودة إلى الصحيح.
toggle() تبديل بين اللفظ في القائمة.
value العودة إلى قائمة اللفظ كنص.
values() العودة إلى معادلة التكرار التي تحتوي على قيم القائمة.

مزيد من الأمثلة

مثال 4

إضافة عدة فئات إلى العنصر:

element.classList.add("myStyle", "anotherClass", "thirdClass");

جربها بنفسك

مثال 5

إزالة عدة فئات من العنصر:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

جربها بنفسك

مثال 6

عدد الفئات للعنصر:

let numb = element.classList.length;

جربها بنفسك

مثال 7

الحصول على اسم الفئة للعنصر "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>أنا myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

جربها بنفسك

مثال 8

الحصول على الفئة الأولى للعنصر:

let className = element.classList.item(0);

جربها بنفسك

مثال 9

هل للعنصر "myStyle" فئة؟

let x = element.classList.contains("myStyle");

جربها بنفسك

مثال 10

إذا كان للعنصر "myStyle" فئة، فأزيل "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

جربها بنفسك

مثال 11

تغيير الفئات لإنشاء زر منسدل:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

جربها بنفسك

مثال 12

إنشاء لوحة الملاحة الثابتة:

// الحصول على لوحة الملاحة
const navbar = document.getElementById("navbar");
// الحصول على موقع التمرير للوحة الملاحة
const sticky = navbar.offsetTop;
// عند وصولك إلى موقع التمرير، أضف فئة sticky إلى لوحة الملاحة
// حذفها عند مغادرة موقع التمرير
function myFunction() {
  إذا (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

جربها بنفسك

دعم المتصفح

كل المتصفحات يدعمها element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم 9-11 الدعم الدعم الدعم الدعم

الصفحات ذات الصلة

دليل تعليمات CSS:قواعد اللغة CSS

دليل مرجعي لـ CSS:مصفوفة اختيار .class لـ CSS

مثل DOMTokenList

ممتلكة className

مетод getElementsByClassName()

مثل HTML DOM Style