HTML DOM classList Propery

<كائن العنصر

مثال

إضافة "mystyle" الفئة إلى <div> العنصر:

document.getElementById("myDIV").classList.add("mystyle");

انها محاولة لنفسك »

أكثر "Try it Yourself" الأمثلة أدناه.

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

الخاصية classList ترجع الطبقة name(s) عنصر، ككائن DOMTokenList.

هذه الخاصية مفيدة لإضافة وإزالة وتبديل الطبقات CSS على عنصر.

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

حل عبر متصفح: لا يتم اعتماد خاصية classList في IE9 والإصدارات السابقة. ومع ذلك، يمكنك استخدام اسم_الفئة الملكية أو التعابير العادية للتوصل إلى حل عبر متصفح (انظر "More Examples" على الجزء السفلي من هذه الصفحة).

دعم المتصفح

الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.

خاصية
classList	ثمانية	10.0	3.6	5.1	11.5

بناء الجملة

element .classList

الخصائص

خاصية	وصف
length	إرجاع عدد الصفوف في القائمة. هذه الخاصيه للقراؤه فقط

أساليب

طريقة	وصف
add( class1, class2, ... )	يضيف أسماء فئة واحدة أو أكثر إلى عنصر. إذا كانت الفئة المحددة موجودة بالفعل، لن تضاف الطبقة
contains( class )	إرجاع قيمة منطقية، تشير إلى ما إذا كان العنصر يحتوي على اسم الفئة المحدد. القيم الممكنة: يحتوي على عنصر اسم الفئة المحدد - صحيح كاذبة - العنصر لا يحتوي على اسم الفئة المحددة
item( index )	يعود اسم الفئة مع عدد الفهرس المحدد من عنصر. يبدأ المؤشر عند 0. يعود لاغية إذا كان المؤشر هو خارج النطاق
remove( class1, class2, ... )	يزيل واحدة أو أكثر من أسماء فئة من عنصر. ملاحظة: إزالة فئة التي لا وجود لها، لا رمي خطأ
toggle( class, true\|false)	تبديل بين اسم فئة لعنصر. المعلمة الأولى يزيل الطبقة المحددة من عنصر، وإرجاع كاذبة. حالة عدم وجود الطبقة، يتم إضافته إلى العنصر، وقيمة الإرجاع هو الصحيح. المعلمة الثانية اختيارية هي قيمة منطقية الذي يفرض على الطبقة التي يمكن ان تضاف أو إزالتها، بغض النظر عن ما إذا كان موجودا بالفعل. فمثلا: إزالة فئة: عنصر .classList. toggle("classToRemove", false) . إضافة فئة: عنصر .classList. toggle("classToAdd", true) . ملاحظة: لا يتم اعتماد المعلمة الثانية في Internet Explorer أو أوبرا 12 و في وقت سابق.

تفاصيل تقنية

قيمة الإرجاع:	A DOMTokenList، يحتوي على قائمة من الطبقة name(s) عنصر

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

مثال

إضافة فئات متعددة إلى <div> العنصر:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

انها محاولة لنفسك »

مثال

إزالة طبقة من <div> العنصر:

document.getElementById("myDIV").classList.remove("mystyle");

انها محاولة لنفسك »

مثال

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

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

انها محاولة لنفسك »

مثال

تبديل بين فئتين ل <div> العنصر:

document.getElementById("myDIV").classList.toggle("newClassName");

انها محاولة لنفسك »

مثال

احصل على الطبقة name(s) من <div> العنصر:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

var x = document.getElementById("myDIV").classList;

ونتيجة لالعاشر على النحو التالي:

mystyle anotherClass thirdClass

انها محاولة لنفسك »

مثال

معرفة عدد أسماء فئة ل <div> عنصر له:

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

ونتيجة لالعاشر على النحو التالي:

انها محاولة لنفسك »

مثال

الحصول على اسم الدرجة الأولى (index 0) ل <div> العنصر:

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

ونتيجة لالعاشر على النحو التالي:

mystyle

انها محاولة لنفسك »

مثال

معرفة ما إذا كان العنصر لديه "mystyle" الفئة:

var x = document.getElementById("myDIV").classList.contains("mystyle");

ونتيجة لالعاشر على النحو التالي:

true

انها محاولة لنفسك »

مثال

معرفة ما إذا كان العنصر لديه "mystyle" الطبقة. إذا كان الأمر كذلك، إزالة اسم فئة أخرى:

var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}

انها محاولة لنفسك »

مثال

تبديل بين الطبقات لإنشاء زر القائمة المنسدلة:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}
}

انها محاولة لنفسك »

مثال الإجراء الاحتياطي: إضافة

حل عبر متصفح عندما تستخدم classList. add() طريقة، لIE9 وفي وقت سابق:

var x = document.getElementById("myDIV");

if (x.classList) {
x.classList.add("mystyle");
} else {
x.className = "mystyle"; // For IE9 and earlier
}

انها محاولة لنفسك »

مثال الإجراء الاحتياطي: إزالة

حل عبر متصفح عندما تستخدم classList. remove() طريقة، لIE9 وفي وقت سابق:

var x = document.getElementById("myDIV");

if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9 and earlier
}

انها محاولة لنفسك »

تراجع مثال: يحتوي على

حل عبر متصفح عندما تستخدم classList. contains() طريقة، لIE9 وفي وقت سابق:

var x = document.getElementById("myDIV");

if (x.classList) {
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
}

انها محاولة لنفسك »

تراجع مثال: تبديل

حل عبر متصفح عندما تستخدم classList. toggle() طريقة، لIE9:

var x = document.getElementById("myDIV");

if (x.classList) {
    x.classList.toggle("mystyle");
} else {
    // For IE9
    var classes = x.className.split(" ");
    var i = classes.indexOf("mystyle");

    if (i >= 0)
        classes.splice(i, 1);
    else
        classes.push("mystyle");
        x.className = classes.join(" ");
}

انها محاولة لنفسك »