Alternating Styles via data- Attribute in JavaScript

Untuk menyelesaikan masalah yang dijelaskan dalam pelajaran sebelumnya, kita tidak akan memberikan kelas kepada elemen, melainkan mengubah nilai atribut data-. Hal ini akan lebih mudah karena atribut semacam ini hanya dapat memiliki satu nilai dan saat menulis, nilai baru secara otomatis akan menimpa nilai lama.

Sebagai contoh, begini cara kita mengatur gaya sukses:

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

Dan begini gaya untuk kesalahan:

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

Gaya untuk keadaan-keadaan tersebut akan kita atur menggunakan selector atribut:

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

Sekarang kita dapat dengan mudah mewarnai elemen kita dengan warna sukses:

elem.dataset.type = 'success';

Dan begini cara mewarnainya dengan warna kesalahan:

elem.dataset.type = 'error';

Diberikan sebuah input. Saat kehilangan fokus, periksa angka yang dimasukkan ke dalamnya. Jika angka tersebut kurang dari sepuluh, warnai input dengan hijau , jika antara sepuluh hingga dua puluh - kuning, dan jika lebih dari dua puluh - merah.