انتقل إلى محتوى الدرس

Adding Classes classList add إضافة الفئات classList add

تحكم بفئات CSS بنظافة في JavaScript عبر كائن classList باستخدام دوال add وremove والعكس المشروط toggle والفحص الدقيق contains والاستبدال الذري replace.
2 صفوف تعليمية
جافا سكريبت
3,728 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

بخلاف الكتابة فوق السلسلة el.className = "active" التي تمسح بقية فئات العنصر بالخطأ، تضيف الدالة el.classList.add("active", "highlighted") فئة أو عدة فئات بأمان وتتجاهل التكرار تلقائياً إن كانت موجودة مسبقاً:

صيغة الدالةالوظيفة المنفذةالقيمة المرجعة
classList.add("a", "b")تضيف فئة أو أكثر دون تكرار أو مسح لسواهاundefined
classList.remove("a", "b")تسحب الفئات المحددة بهدوءundefined
classList.toggle("open", force?)تعكس وجود الفئة أو تفرض حالة منطقيةقيمة منطقية لوجود الفئة بعدها
classList.contains("open")تختبر امتلاك العنصر للفئة حالياًtrue أو false
classList.replace("old", "new")تستبدل الفئة القديمة بالجديدة بخطوة واحدةtrue عند نجاح الاستبدال
الصف 2 ملاحظة هامة