سيشرح هذا الدليل إجراء إضافة فئة نشطة في JavaScript.
كيفية إضافة Active Class في JavaScript؟
لإضافة فصل نشط ، سنستخدم الطرق التالية:
دعنا نتوجه إلى الطريقة الأولى!
الطريقة الأولى: استخدم document.getElementById () باستخدام أسلوب classList.add () لإضافة فئة نشطة في JavaScript
في JavaScript ، فإن ' document.getElementById () 'طريقة للوصول إلى عنصر معين من خلال معرفه. ومع ذلك ، فإنه يختار فقط العناصر بناءً على معرفاتها ، وليس الفئات. يمكنك استخدامه مع ' classList.add () ”لإضافة فئة نشطة في JavaScript.
دعونا نستكشف هذه الطريقة بأخذ مثال.
مثال
في ملف HTML الخاص بنا ، سنأخذ ' 'مع بعض النصوص ، حدد معرفها كـ' رسالة قصيرة '، وإضافة' عند النقر 'الذي سيؤدي إلى تشغيل' تفعيل() ' وظيفة. لاحظ أنه ، أضف علامة
داخل علامة
: < ع معرف = 'رسالة قصيرة' عند النقر = 'تفعيل()' > أنقر هنا ص >في ملف جافا سكريبت ، حدد وظيفة activ () بحيث تصل أولاً إلى عنصر الفقرة باستخدام معرفها في طريقة document.getElementbyId (). بعد ذلك ، أضف فئة CSS إلى قائمة فصولها لأغراض التصميم:
تنشيط الوظيفة ( ) {
هناك = وثيقة. getElementById ( 'رسالة قصيرة' ) ؛
أ. قائمة الطبقة . يضيف ( 'صف جديد' ) ؛
}
في ملف CSS ، ضع نقطة قبل ' صف جديد 'وتعيين' لون الخلفية 'الخاصية قيمة' البرتقالي ':
. صف جديد {معرفتي - اللون : البرتقالي ؛
}
نتيجة لذلك ، عندما تنقر على عنصر الفقرة ، سيتم تطبيق خاصية الخلفية المضافة عليه:
دعونا نلقي نظرة على الطريقة التالية التي سنستخدم بها document.querySelector () لإضافة فصل دراسي نشط.
الطريقة الثانية: استخدم document.querySelector () مع classList.add () طريقة إضافة فئة نشطة في JavaScript
في JavaScript ، فإن ' document.querySelector () ”للحصول على العنصر الأول من الكود. يمكنك تحديد الفئات والمعرفات داخل أسلوب querySelector (). يمكن استخدامه مع ' classList.add () ”لإضافة فئة نشطة في JavaScript.
مثال
سنستخدم الآن فقط ' document.querySelector () 'بالمعرف' #رسالة قصيرة 'لتحديد عنصر الفقرة. مرة أخرى ، سيتم استخدام طريقة classList.add () لإضافة العامل النشط ' صف جديد ':
تنشيط الوظيفة ( ) {هناك = وثيقة. الاستعلام ( '#رسالة قصيرة' ) ؛
أ. قائمة الطبقة . يضيف ( 'صف جديد' ) ؛
}
انتاج |
لقد تعلمنا طريقتين من أبسط الطرق لإضافة فئة نشطة في JavaScript
استنتاج
لإضافة فصل دراسي نشط ، يمكننا الاستفادة من ' getElementById () ' أو ' محدد الاستعلام () 'باستخدام طريقة classList.add (). تحصل كلتا الطريقتين المذكورتين على العناصر من خلال معرفها أولاً ، ثم باستخدام طريقة classList.add () ، اسم الفئة الجديد المخصص للعنصر الذي يمكن استخدامه لأغراض التصميم. وصف هذا المنشور الإجراء المتعلق بإضافة فئة نشطة في JavaScript.