Stilu maiņa, izmantojot data- atribūtu JavaScript

Lai atrisinātu problēmu, kas aprakstīta iepriekšējā nodarbībā, mēs neiestatīsim elementam klases, bet gan mainīsim data- atribūta vērtību. Tas būs ērti, jo šādam atribūtam var būt tikai viena vērtība un, ierakstot, jaunā vērtība pati aizstās veco.

Piemēram, šādi mēs iestatīsim veiksmīgo stilu:

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

Un šādi stilu kļūdai:

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

Mēs iestatīsim savu stāvokļu stilus, izmantojot atribūtu selektorus:

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

Tagad mēs viegli varam nokrāsot mūsu elementu veiksmes krāsā:

elem.dataset.type = 'success';

Un šādi mēs to nokrāsosim kļūdas krāsā:

elem.dataset.type = 'error';

Ir dots ievades lauks. Pēc fokusa zaudēšanas pārbaudiet tajā ievadīto skaitli. Ja šis skaitlis līdz desmit, tad nokrāsojiet ievades lauku zaļā krāsā, ja no desmit līdz divdesmit - dzeltenā, un, ja vairāk par divdesmit - sarkanā.