نضيف العديد من الكلاسات للعنصر للمزيد من التميز نفترض أنك لديك مجموعة من الأزرار لهم خصائص مشتركة ولكن كل منهم له خاصية مميزة له كاللون مثلا هنا يأتى الدور لإضافة أكثر من كلاس للتمييز بينهم تستطيع عمل ذلك بإمكانك اضافة بعض الخصائص لكلاس معين ووضعه لكل الأزرار وعمل كلاس أخر مميز لبعض الخصائص الأخرى نعطى خصائص للكلاسات في ال style كالأتى /*الكلاس الأساسي لبعض الأزرار */ .btn { width: 60px; padding: 12px 24px; border-radius: 8px; cursor: pointer; border-width: 1px; border-style:

الأمر سيتم كالتالى عند تحميل الصفحة سيدخل على شرط ال if الأولى اذا تحقق الشرط الذي بداخل (document.querySelector("body > i").classList.contains("fa-bars-staggered") سيتم تنفيذ ما بداخلها document.querySelector("body > i").addEventListener('click', () => { document.querySelector("body > i").classList.remove("fa-bars-staggered") document.querySelector("body > i").classList.add("fa-close"); // document.querySelector(".sidebar").classList.add("active"); }) وهو لا يحتوي على كونسول لكى يتم تنفيذه وبما انه تم تنفيذ ما بداخل الشرط الأول فلا يتم الدخول الى الشرط التانى else if لا يتم الدخول الى الشرط التانى وتنفيذ ما بداخله الى الا فى حالة الشرط الأول لم يتحقق