Afwisseling van style deur data- kenmerk in JavaScript
Om die probleem wat in die vorige les beskryf is op te los,
sal ons nie klasse aan die element toewys nie, maar eerder
die waarde van die data- kenmerk verander.
Dit is gerieflik omdat so 'n kenmerk
slegs een waarde kan hê
en wanneer 'n nuwe waarde geskryf word, sal dit outomaties
die ou waarde vervang.
As voorbeeld, so sal ons 'n suksesvolle styl toewys:
<div id="elem" data-type="success">
teks
</div>
En so 'n styl vir 'n fout:
<div id="elem" data-type="error">
teks
</div>
Ons sal die style van ons toestande toewys deur kenmerk keurders:
[data-type="success"] {
color: green;
}
[data-type="warning"] {
color: orange;
}
[data-type="error"] {
color: red;
}
Nou kan ons maklik ons element in 'n sukseskleur kleur:
elem.dataset.type = 'success';
En so kleur ons dit in 'n foutkleur:
elem.dataset.type = 'error';
Daar is 'n invoerveld. Wanneer fokus verloor word, kontroleer die getal wat daarin ingevoer is. As dit 'n getal van tien of minder is, kleur die invoerveld in groen, as dit tussen tien en twintig is - in geel, en as dit meer as twintig is - in rooi.
