Penghiasan dengan Kelas CSS pada JavaScript

Dalam pelajaran sebelumnya, kita belajar menukar gaya CSS elemen melalui pengubahan atribut style. Selalunya, ini bukan idea yang sangat baik. Hal ini kerana, jika CSS style diserakkan merata dalam kod JavaScript, ia akan menjadi bermasalah untuk menukar reka bentuk laman web pada masa hadapan kerana kita terpaksa mengodok kod JavaScript untuk mencari style yang tertanam di dalamnya.

Lebih mudah untuk penyelenggaraan pada masa hadapan ialah menambah atau mengalih keluar kelas CSS pada elemen, sekaligus menghiasnya dengan cara yang dikehendaki.

Mari kita lihat contoh. Katakan kita mempunyai beberapa perenggan:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Mari kita buat supaya apabila klik pada mana-mana perenggan, perenggan itu akan diwarnakan dengan warna tertentu, contohnya, hijau. Untuk ini, dalam fail CSS buat kelas khas untuk mewarnakan perenggan:

.colored {
	color: green;
}

Kelebihan menggunakan kelas ialah sekarang kita mudah boleh menukar warna yang dikehendaki - untuk ini kita hanya perlu membuat pertukaran dalam fail CSS, tanpa mengodok kod JavaScript. Ini amat mudah dalam kes di mana anda yang menulis kod JavaScript, dan pada masa hadapan orang lain yang akan menghiasnya (mungkin orang yang kurang mahir, yang hanya pandai bekerja dengan CSS).

Jadi, sekarang, selepas memperkenalkan kelas, apabila klik pada mana-mana perenggan, kita boleh menukar warnanya, hanya dengan menambahkan kelas kita kepadanya:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // menambah kelas pada perenggan
	});
}

Terangkan mengapa saya memilih perkataan colored untuk nama kelas, dan bukannya perkataan green, yang jelas menunjukkan warna yang kita kehendaki.

Diberi satu perenggan. Diberi butang 'potong', 'jadikan tebal', 'jadikan merah'. Biarkan apabila ditekan pada setiap butang, tindakan yang ditetapkan berlaku pada perenggan (menjadi merah, contohnya).