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:

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

Dan begini gaya untuk ralat:

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

Kita akan tetapkan gaya keadaan kita melalui pemilih atribut:

css[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:

javascriptelem.dataset.type = 'success';

Dan begini kita warnakannya dengan warna ralat:

javascriptelem.dataset.type = 'error';