Växling av stilar via data-attribut i JavaScript

För att lösa problemet som beskrivs i föregående lektion, kommer vi inte att tilldela elementen klasser, utan vi kommer att ändra värdet på data- attributet. Detta är bekvämt eftersom ett sådant attribut bara kan ha ett värde och när ett nytt värde sätts kommer det automatiskt att skriva över det gamla.

Till exempel, så här sätter vi en framgångsrik stil:

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

Och så här stilen för ett fel:

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

Vi sätter stilarna för våra tillstånd genom attributväljare:

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

Nu kan vi enkelt färga vårt element i en framgångsrik färg:

elem.dataset.type = 'success';

Och så här färgar vi i fel-färg:

elem.dataset.type = 'error';

Du får en inmatningsruta. När den tappar fokus, kontrollera det inmatade talet. Om talet är mindre än tio, färga inmatningsrutan grön. Om det är mellan tio och tjugo - gul, och om det är mer än tjugo - röd.