📌 Kirish

JavaScript yordamida HTML elementlariga style qo‘shish, ularni o‘zgartirish va dinamik ravishda dizaynni boshqarish mumkin. Ushbu darsda style obyekti, classList metodlari bilan ishlashni o‘rganamiz.

🎯 1. style Obyekti Orqali Style Qo‘shish

✅ JavaScript-da inline style qo‘shish quyidagicha amalga oshiriladi:

let box = document.getElementById("box");
box.style.color = "red"; // Matn rangini qizil qilish
box.style.backgroundColor = "lightblue"; // Orqa fon rangini o‘zgartirish
box.style.fontSize = "20px"; // Matn o‘lchamini o‘zgartirish

📌 Vazifa:

• Elementga width va height qo‘shib, o‘lchamini o‘zgartiring.
• Orqa fon rangini har 2 soniyada almashtiruvchi kod yozing.

🎯 2. classList Metodlari

✅ CSS klasslari bilan ishlash uchun classList metodlaridan foydalanish mumkin.

let button = document.getElementById("myButton");
button.classList.add("btn-primary"); // Klass qo‘shish
button.classList.remove("btn-secondary"); // Klassni olib tashlash
button.classList.toggle("active"); // Klass bor bo‘lsa olib tashlaydi, yo‘q bo‘lsa qo‘shadi

📌 Vazifa:

• Elementga yangi CSS klass qo‘shing.
• Tugmaga bosilganda fon rangini o‘zgartiruvchi funksiya yozing.

📌 Kirish

JavaScriptda CSS klasslarini dinamik boshqarish uchun classList obyektining add(), remove(), toggle() metodlari ishlatiladi. Ushbu darsda klasslarni qo‘shish, o‘chirish va almashtirish usullarini o‘rganamiz.