في الماضي ، كنا بحاجة إلى استخدام بعض طرق JS أو JQuery ، و addClass ، وإزالة بعض الفئات. مزعج.
تتيح لنا قائمة الفئة الجديدة من H5 تشغيل اسم فئة عناصرنا الأكثر ملاءمة.
يلاحظتوافق قائمة الفئة سيئة إلى حد ما ، غير متوافق مع متصفح IE أدناه IE10.
مثال مثالي
<! حجم الخط: 25px ؛} </style> </head> <body> <p> انقر فوق الزر لإضافة فئة Mystyle إلى عنصر Div. </p> <button onClick = myFunction ()> انقر فوق لي </button> <div id = mydiv> أنا عنصر div. </viv> <script> function myfunction () {document.getElementById (myDiv) .classlist.add (mystyle) ؛} </script> </body> </html> فئة جديدةباستخدام طريقة إضافة ، يمكنك إضافة فئة واحدة أو أكثر إلى عنصر الصفحة:
document.getElementById (myDiv) .ClassList.add (Mystyle) ؛حذف الفصل
باستخدام طريقة إزالة ، يمكنك حذف فئة CSS واحدة:
document.getElementById (myDiv) .ClassList.Remove (Mystyle) ؛تبديل اسم فئة في العناصر
تبديل أسماء الفئات في العناصر. استخدم طريقة التبديل ، القواعد النحوية: Toggle (الفصل ، صحيح | خطأ)
المعلمة الأولى هي اسم الفئة الذي سيتم إزالته في العنصر وإرجاع خطأ.
إذا لم يكن الاسم موجودًا ، فسيتم إضافة اسم الفصل إلى العنصر ويعيد صحيحًا.
والثاني هو المعلمات الاختيارية. على سبيل المثال:
إزالة واحد
document.getElementById (myDiv) .classlist.toggle (classtoremove ، false) ؛
أضف واحدة
document.getElementById (myDiv) .classlist.toggle (classtoadd ، true) ؛
ملاحظة: Internet Explorer أو Opera 12 والإصدارات السابقة لا تدعم المعلمة الثانية
تحقق مما إذا كان يحتوي على فئة معينةاستخدم طريقة تحتوي على ما إذا كانت هناك فئة موجودة والعودة إلى القيمة المنطقية.
// return true أو false document.getElementById (myDiv) .ClassList.contains (myDiv) ؛
ما سبق هو كل محتويات هذا المقال.