Alternarea stilurilor prin atributul data- în JavaScript

Pentru a rezolva problema descrisă în lecția anterioară, nu vom seta clase elementului, ci vom schimba valoarea atributului data-. Acest lucru este convenabil deoarece un astfel de atribut poate avea o singură valoare și la scriere, noua valoare va înlocui automat vechea.

De exemplu, așa vom seta stilul de succes:

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

Și așa stilul pentru eroare:

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

Vom seta stilurile pentru stările noastre folosind selectori de atribut:

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

Acum putem colora cu ușurință elementul nostru în culoarea de succes:

elem.dataset.type = 'success';

Și așa îl colorăm în culoarea de eroare:

elem.dataset.type = 'error';

Este dat un input. La pierderea focusului, verificați numărul introdus în el. Dacă acest număr este până la zece, colorați input-ul în verde, dacă este de la zece la douăzeci - în galben, iar dacă este mai mult de douăzeci - în roșu.