JavaScript-da data- atributy arkaly stilleri çalşyrmak

Öňki sapakda beýan edilen meseläni çözmek üçin, biz elementa klasslar bermezlik we onuň ýerine data- atributynyň bahasyny üýtgetmelilik ederis. Bu şuña görä amatly bolar, şonuň ýaly atribut diňe bir baha bolup biler we täze baha ýazylanyňyzda, köne baha awtomatik ýitiriler.

Mysal üçin, biz şeýlelik bilen üstünlik stilini belleris:

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

Ýalňyşlyk üçin bolsa şeýle stil:

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

Ýagdaýlarymyzyň stillerini bolsa biz atribut selektorlary arkaly belleris:

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

Indi biz elementimizi üstünlik reňkine jeňillik bilen boýaýabylarys:

elem.dataset.type = 'success';

Ýalňyşlyk reňkine bolsa şeýle boýar:

elem.dataset.type = 'error';

Input berlen. Fokusy ýitirilende, oňa girizilen sany barlaň. Eger bu san ona çenli bolsa, inputy ýaşyl reňke, eger ondan ýigrime çenli bolsa - sary reňke, ýigrimeden köp bolsa bolsa - gyzyl reňke boýaň.