Penggantian Gaya Melalui Atribut data- dalam JavaScript

Untuk menyelesaikan masalah yang diterangkan dalam pelajaran sebelumnya, kita tidak akan menetapkan kelas kepada elemen, sebaliknya kita akan menukar nilai atribut data-. Ini memudahkan kerana atribut sedemikian hanya boleh mempunyai satu nilai dan apabila nilai baru ditulis, ia secara automatik akan menggantikan nilai lama.

Sebagai contoh, begini cara kita menetapkan gaya kejayaan:

<div id="elem" data-type="success">
	text
</div>

Dan begini gaya untuk ralat:

<div id="elem" data-type="error">
	text
</div>

Kita akan tetapkan gaya keadaan kita melalui pemilih atribut:

[data-type="success"] {
	color: green;
}
[data-type="warning"] {
	color: orange;
}
[data-type="error"] {
	color: red;
}

Sekarang kita dengan mudah boleh mewarnakan elemen kita dengan warna kejayaan:

elem.dataset.type = 'success';

Dan begini kita warnakannya dengan warna ralat:

elem.dataset.type = 'error';

Diberi satu input. Apabila kehilangan fokus, semak nombor yang dimasukkan ke dalamnya. Jika nombor itu kurang daripada sepuluh, warnakan input tersebut dengan hijau, jika antara sepuluh hingga dua puluh - dengan kuning, dan jika lebih daripada dua puluh - dengan merah.