شرح صفوف ومحتوى الفقرة
ترجع element.classList كائن DOMTokenList ذكياً يمنع تكرار الفئات ويعالج كل فئة باستقلالية تامة دون المساس بجاراتها:
- تقبل
classList.add("a", "b")وclassList.remove("a", "b")عدة فئات دفعة واحدة وتتجاهل الفئة المكررة تلقائياً. - يقبل المعامل المنطقي الثاني في
classList.toggle("open", isOpen)فرض الإضافة عندtrueوالحذف عندfalseفي سطر واحد يغنيك عن جملif/else! - تبدّل
classList.replace("pending", "verified")فئة قديمة بأخرى جديدة ذرياً وترجع قيمة منطقية تؤكد نجاح التبديل.
JavaScript
const pill = document.getElementById('pill');
let isDark = false;
document.getElementById('toggleBtn').addEventListener('click', () => {
isDark = !isDark;
pill.classList.toggle('dark-pill', isDark);
pill.classList.replace(isDark ? 'idle' : 'live', isDark ? 'live' : 'idle');
});