JavaScriptда data- атрибут орқали стилларни алмаштириш

Олдинги дарсда баён этилган муаммони ҳал этиш учун, биз элементга класслар бермаймиз, балки data- атрибутнинг қийматини ўзгартирамиз. Бу қулай бўлади, чунки бундай атрибут фақат битта қийматга эга бўлиши мумкин ва янги қийматни ёзганда эски қиймат ўзи ўрнини бошқасига босиб қўяди.

Мисол учун, муваффақиятли стилни шундай берямиз:

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

Хато учун стил эса шундай:

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

Ҳолатимизнинг стилларини биз атрибут селекторлари орқали берамиз:

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

Энди биз осонлик билан элементмизни муваффақиятли рангга бояшимиз мумкин:

elem.dataset.type = 'success';

Хато рангига бўёш эса шундай:

elem.dataset.type = 'error';

Инпут берилган. Фокус йўқотилганда унинг ичига киритилган сонни текширинг. Агар бу сон ўнгача бўлса, инпутни яшил рангга бўянг, агар ўндан йигирмагача бўлса - sариқ рангга, агар йигирмадан ортиқ бўлса - қизил рангга бўянг.