Menambahkan Style JavaScript ke Class
Dalam pengembangan web, seringkali kita perlu mengubah tampilan elemen HTML secara dinamis berdasarkan kondisi tertentu. JavaScript memungkinkan kita untuk melakukan hal ini dengan mudah, salah satunya dengan menambahkan style ke class.
Cara Menambahkan Style dengan JavaScript
Ada beberapa cara untuk menambahkan style dengan JavaScript ke class:
1. Menggunakan style.cssText
Metode ini memungkinkan kita untuk mengatur semua style sekaligus dengan string CSS.
const element = document.querySelector('.my-class');
element.style.cssText = 'background-color: red; color: white; font-size: 20px;';
2. Mengatur Property Style Individual
Kita juga dapat mengatur setiap property style secara individual.
const element = document.querySelector('.my-class');
element.style.backgroundColor = 'red';
element.style.color = 'white';
element.style.fontSize = '20px';
3. Menggunakan classList
Metode ini memungkinkan kita untuk menambahkan, menghapus, atau mengubah class yang ada pada elemen.
const element = document.querySelector('.my-class');
// Menambahkan class
element.classList.add('new-class');
// Menghapus class
element.classList.remove('my-class');
// Mengganti class
element.classList.replace('my-class', 'new-class');
Penting: Pastikan file CSS Anda telah dihubungkan ke file HTML Anda.
Contoh Penggunaan
Berikut contoh sederhana bagaimana menambahkan style JavaScript ke class:
Style with JavaScript
Ini adalah teks dengan style awal
Kode di atas akan menampilkan sebuah div dengan background biru dan teks putih. Ketika tombol "Ubah Style" diklik, class "my-class" akan diganti dengan class "new-class" sehingga tampilan div akan berubah menjadi background merah dan teks hitam.
Kesimpulan
Menambahkan style JavaScript ke class memberikan fleksibilitas yang besar dalam mengatur tampilan elemen web secara dinamis. Dengan memilih metode yang sesuai, Anda dapat membuat website Anda lebih interaktif dan menarik.