Veksling av stiler via data-attributt i JavaScript

For å løse problemet beskrevet i forrige leksjon, vil vi ikke tildele elementet klasser, men i stedet endre verdien til data- attributtet. Dette er praktisk fordi et slikt attributt kun kan ha én verdi og når en ny verdi skrives, vil den automatisk overskrive den gamle.

For eksempel, slik vil vi sette en vellykket stil:

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

Og slik stilen for en feil:

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

Stylene for tilstandene våre vil vi sette via attributt-selektorer:

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

Nå kan vi enkelt fargelegge elementet vårt i vellykket farge:

elem.dataset.type = 'success';

Og slik fargelegger vi i feilfarge:

elem.dataset.type = 'error';

Du får et inputfelt. Ved tap av fokus, sjekk nummeret som er skrevet inn i det. Hvis dette nummeret er under ti, fargelegg inputfeltet i grønn farge, hvis det er fra ti til tjue - i gul, og hvis det er over tjue - i rød.