Penggayaan dengan Kelas dalam JavaScript

Menggayakan elemen melalui atribut style kadangkala mudah, tetapi selalunya - bukan idea yang terbaik. Masalahnya ialah gaya akan berselerak di dalam fail JavaScript dan sukar untuk diubah. Lebih mudah untuk menetapkan gaya dalam fail CSS supaya ia boleh diubah dengan mudah, tanpa perlu mengodok kod JavaScript.

Sebagai contoh, katakan kita mempunyai elemen yang memaparkan beberapa mesej. Mesej boleh jadi "baik" dan dipaparkan dengan warna hijau dan "tidak baik" serta dipaparkan dengan warna merah. Penyelesaian terbaik dalam kes ini ialah membuat kelas CSS yang sesuai:

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

Sekarang, apabila memaparkan mesej "baik" kita akan memberikan elemen tersebut kelas "baik":

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

Dan apabila memaparkan mesej "tidak baik" kita akan memberikan elemen tersebut kelas "tidak baik":

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

Diberi perenggan dengan nombor. Ulangi perenggan ini dengan gelung dan perenggan yang mengandungi nombor genap, warnakan dengan warna merah, manakala yang mengandungi nombor ganjil - dengan warna hijau.