Skiften af stilarter via data-attribut i JavaScript

For at løse problemet beskrevet i den forrige lektion, vil vi ikke tildele elementet klasser, men i stedet ændre værdien af data- attributten. Dette vil være praktisk, fordi en sådan attribut kun kan have én værdi og ved tilskrivning vil den nye værdi automatisk overskrive den gamle.

For eksempel, sådan vil vi tildele en successtil:

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

Og sådan en stil for en fejl:

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

Vi vil tildele stilarterne for vores tilstande via attribut-selektorer:

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

Nu kan vi nemt farve vores element i succesfarven:

elem.dataset.type = 'success';

Og sådan farver vi i fejlfarven:

elem.dataset.type = 'error';

Der gives et inputfelt. Ved tab af fokus skal du kontrollere det indtastede nummer. Hvis dette nummer er under ti, så farv inputfeltet i grøn farve, hvis det er fra ti til tyve - i gul, og hvis det er mere end tyve - i rød.