Styling dengan Kelas CSS pada JavaScript

Dalam pelajaran sebelumnya, kita belajar mengubah gaya CSS elemen melalui pengubahan atribut style. Seringkali ini bukan ide yang bagus. Masalahnya adalah, jika menyebarkan gaya CSS di seluruh kode JavaScript, akan bermasalah nantinya untuk mengubah desain situs, karena harus mengutak-atik kode JavaScript untuk mencari gaya yang tertanam di dalamnya.

Lebih nyaman untuk pemeliharaan selanjutnya dengan menambahkan atau menghapus kelas CSS pada elemen, sehingga menata gayanya dengan cara yang diinginkan.

Mari kita lihat contohnya. Misalkan kita memiliki beberapa paragraf:

<p>teks1</p>
<p>teks2</p>
<p>teks3</p>

Mari kita buat agar saat diklik pada paragraf mana pun, paragraf tersebut diwarnai dengan suatu warna, misalnya, hijau. Untuk itu, dalam file CSS buatlah kelas khusus untuk mewarnai paragraf:

.colored {
	color: green;
}

Keuntungan menggunakan kelas adalah, sekarang mudah untuk mengubah warna yang diinginkan - untuk itu hanya perlu dilakukan perubahan pada file CSS, tanpa mengutak-atik kode JavaScript. Sangat nyaman terutama dalam kasus di mana kode JavaScript ditulis oleh Anda, dan nantinya penata gayanya akan dilakukan oleh orang lain (mungkin orang yang kurang berkualifikasi, yang hanya bisa bekerja dengan CSS).

Jadi, sekarang, setelah memperkenalkan kelas, saat diklik pada paragraf mana pun, warnanya dapat diubah, cukup dengan menambahkan kelas kita kepadanya:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // menambahkan kelas ke paragraf
	});
}

Jelaskan mengapa saya memilih kata colored untuk nama kelasnya, dan bukan kata green, yang secara jelas menunjukkan warna yang kita inginkan.

Diberikan sebuah paragraf. Diberikan tombol 'coret', 'buat tebal', 'buat merah'. Misalnya saat ditekan pada setiap tombol, aksi yang diberikan terjadi pada paragraf (menjadi merah, misalnya).