Data- ատրիբուտի միջոցով ոճերի հերթափոխ JavaScript-ում

Նախորդ դասում նկարագրված խնդիրը լուծելու համար մենք չենք տա էլեմենտին դասեր, այլ կփոխենք 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';

Տրված է ինփուտ։ Ֆոկուսը կորցնելու դեպքում ստուգեք դրանում մուտքագրված թիվը։ Եթե այդ թիվը տասից փոքր է, ապա ներկեք ինփուտը կանաչ գույնով, եթե տասից քսան - դեղին, իսկ եթե քսանից ավելի - կարմիր։