English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

مثل JS

دليل JS

دليل JS DOM

خصائص HTML DOM classList

مثلث عنصر HTML DOM

classListخصائص غير قابل للتعديل تعود بجمعه من مجموعة DOMTokenList لحالة الوقت الحقيقي من خصائص class العنصر.

خصائص classList مفيدة جدًا في إضافة، إزالة وتتبديل الفئات CSS على العنصر.

هذه الخاصية غير قابل للتعديل، على الرغم من أنك يمكنك تعديلها باستخدام طرق add() و remove().

استخدام classList هو طريقة مريحة لتعويضها، يمكنهclassNameوصول إلى قائمة الفئات للعنصر باستخدام سلسلة منفصلة بالأبيضاء.

القواعد النحوية:

element.classList
var elem = document.getElementById("x");
elem.classList.add("para");
}

متوافق مع المتصفح

الرقم في الجدول يعين الإصدار الأول من المتصفح الذي يدعم الخاصية classList بالكامل:

الخصائص
classList83.6هو5.110

الخصائص

الخصائصالوصف
lengthلإرجاع عدد الفئات في القائمة.

الطريقة

الطريقةالوصف
add(class1, class2, ...)أضف اسم فئة واحدة أو أكثر إلى العنصر.
إذا كانت الفئة المحددة موجودة مسبقًا في خصائص class العنصر، فإنها لن تضيف هذه الفئة.
contains(CSS .)}}تحقق مما إذا كانت القيمة المحددة للفئة موجودة في خصائص class العنصر.
القيم الممكنة:

  • true-العنصر يحتوي على الاسم المحدد للفئة

  • false-العنصر لا يحتوي على الاسم المحدد للفئة

item(index)}}لإرجاع قيمة الفئة من خلال المؤشر في المجموعة. يبدأ المؤشر من 0.
إذا كان المؤشر يتجاوز النطاق، فإنه يعودnull.
remove(class1, class2, ...)حذف اسم فئة واحدة أو أكثر من العنصر.
ملاحظة:حذف الصفحة التي لا توجد فيها لن يؤدي إلى خطأ.
replace(oldClass, newClass)}}استبدال الصنوف الحالية بأسماء صنف جديدة.
toggle(CSS ., true|false)تغيير بين أسماء الصنوف للعنصر.
عند وجود متغير واحد فقط: قم بتشغيل قيمة الصنف؛ وإلا، عائد 0. أي، إذا كان الصنف موجودًا، يتم إزالته وإرجاع خطأ، وإذا لم يكن موجودًا، يتم إضافته وإرجاع صحيح.
عند وجود ثاني متغير اختياري: إذا كان قيمة الثاني متغير اختياري صحيحة، فإنه يضيف القيمة المحددة للصنف المحدد؛ إذا كانت قيمة الثاني متغير اختياري خطأ، فإنه يزيلها.
مثال:
　 　 　 　 　 إزالة صنف واحد:العنصر .classList.toggle（"classToRemove"，false）;
　 إضافة صنف جديد:العنصر .classList.toggle（"classToAdd"，true）;

تفاصيل تقنية

القيمة الم返回ة:DOMTokenList، تحتوي على قائمة بأسماء الصنوف للعنصر
إصدار DOM:مستوى DOM 1

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

إضافة عدة صنوف إلى عنصر <p>:

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");
}

إزالة صنف واحد من عنصر <p>:

var elem = document.getElementById("x");
elem.classList.remove("para");
}

إزالة عدة صنوف من عنصر <p>:

var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");
}

تغيير الصنف بين عنصر <p>:

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");
}

استرداد اسم الصنوف للعنصر <p>:

var len = document.getElementById("x").classList.length;
}

استرداد اسم الصنوف للعنصر <p>:

var name = document.getElementById("x").classList;
}

استرداد اسم الصنف الأول للعنصر <p> (السطر 0):

var name = document.getElementById("x").classList[0];
}

استخدام طريقة item() لاسترداد اسم الصنف الأول للعنصر <p> (السطر 0):

var name = document.getElementById("x").classList.item(0);
}

ابحث عن ما إذا كان العنصر يحتوي على الصنف "shadow":

var list = document.getElementById("x").classList;
if (list.contains("shadow")) {
alert("نعم!!! العنصر P يحتوي على صفة 'shadow'");
else {
}　　　
alert("لا توجد صفة 'shadow' المطلوبة");
}

الاختبار لرؤية‹/›

تغيير الصفة (الصفة المفتوحة "open") لإنشاء زر توجيه جانبي:

مراجع مرتبطةدليل CSS:

مصفوفة CSSمرجع CSS:CSS #الصفة

الرقم المحدد مرجع CSS:CSS . الصفة

طريقة getElementById() في HTML DOMالمصفوفات

طريقة getElementById() في HTML DOMخصائص className في HTML DOM

طريقة getElementById() في HTML DOMطريقة getElementsByClassName() في HTML DOM

طريقة getElementById() في HTML DOMدليل مرجعي لـ HTML DOM

مثلث عنصر HTML DOM

مثلث التاريخ في جافا سكربتمثلث عنصر HTML DOM