الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <style> .highlight { background: lightskyblue; padding: 10px; } </style> </head> <body> <h1>JS Toggle CSS Class</h1> <p>You can use the "classList.toggle()" method to toogle the css class on the element.</p> <p id="demo">Initially I didn't use the highlight class, but I am using it now.</p> <script> // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var element = document.getElementById('demo'); // highlight يتناوب على استخدام الكلاس element هنا قمنا بجعل العنصر الذي يمثله المتغير // للعنصر لأنه في الأساس لا يستخدمه highlight في حالتنا سنلاحظ أنه سيتم إضافة الكلاس element.classList.toggle('highlight'); </script> </body> </html>
الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكودالصفحة الرئيسيةتحميل الكودتغيير الألوانتغيير العرضتغيير حجم العرضتشغيل الكود