Stijlen afwisselen via data- attribuut in JavaScript
Om het probleem op te lossen dat in de vorige les werd beschreven,
zullen we het element geen klassen toewijzen, maar in plaats daarvan
de waarde van het data- attribuut veranderen.
Dit is handig omdat zo'n attribuut
slechts één waarde kan hebben
en bij het instellen zal de nieuwe waarde
automatisch de oude overschrijven.
Als voorbeeld, zo stellen we de successtijl in:
<div id="elem" data-type="success">
text
</div>
En zo de stijl voor een fout:
<div id="elem" data-type="error">
text
</div>
We stellen de stijlen van onze statussen in via attribuutselectors:
[data-type="success"] {
color: green;
}
[data-type="warning"] {
color: orange;
}
[data-type="error"] {
color: red;
}
Nu kunnen we eenvoudig ons element in de succeskleur kleuren:
elem.dataset.type = 'success';
En zo kleuren we het in de foutkleur:
elem.dataset.type = 'error';
Gegeven een invoerveld. Controleer bij verlies van focus het ingevoerde getal. Als dit getal kleiner is dan tien, kleur het invoerveld dan groen, als het tussen tien en twintig ligt - geel, en als het meer dan twintig is - rood.
