Styling dengan Kelas di JavaScript

Menata elemen melalui atribut style kadang-kadang mudah, tetapi seringkali - bukan ide yang paling bagus. Masalahnya adalah gaya-gaya tersebut akan tersebar di file JavaScript dan akan sulit untuk mengubahnya. Jauh lebih mudah untuk menetapkan gaya dalam file CSS sehingga dapat dengan mudah diubah, tanpa harus menggali ke dalam kode JavaScript.

Sebagai contoh, mari kita memiliki elemen, yang menampilkan pesan tertentu. Pesan tersebut bisa "baik" dan ditampilkan dengan warna hijau dan "buruk" dan ditampilkan dengan warna merah. Solusi terbaik dalam kasus seperti ini adalah membuat kelas CSS yang sesuai:

.success {
	color: green;
}
.error {
	color: red;
}

Sekarang saat menampilkan pesan "baik" kita akan memberikan elemen kelas "baik":

elem.textContent = 'good';
elem.classList.add('success');

Dan saat menampilkan pesan "buruk" kita akan memberikan elemen kelas "buruk":

elem.textContent = 'bad';
elem.classList.add('error');

Diberikan paragraf dengan angka. Ulangi paragraf-paragraf ini dengan perulangan dan paragraf yang berisi angka genap, warnai dengan warna merah, dan yang berisi angka ganjil - dengan warna hijau.