JavaScriptda data- atributi orqali uslublarni almashtirish

Oldingi darsda tavsiflangan muammoni hal qilish uchun, biz elementga klasslar bermaymiz, balki data- atributining qiymatini o'zgartiramiz. Buning qulay tomoni shundaki, bunday atribut faqat bitta qiymatga ega bo‘lishi mumkin va yangi qiymat yozilganda, avvalgi qiymat avtomatik ravishda o‘chiriladi.

Misol uchun, muvaffaqiyatli uslubni shunday belgilaymiz:

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

Xato uchun uslub esa shunday:

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

Holatlarimizning uslublarini biz atribut selektorlari orqali belgilaymiz:

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

Endi biz osonlikcha elementimizni muvaffaqiyatli rangga bo‘yashimiz mumkin:

elem.dataset.type = 'success';

Xato rangiga esa shunday bo‘yamiz:

elem.dataset.type = 'error';

Input berilgan. Fokus yo‘qolganda, unga kiritilgan raqamni tekshiring. Agar bu raqam o‘nndan kichik bo‘lsa, inputni yashil rangga bo‘yang, agar o‘ndan yigirmagacha bo‘lsa - sariq rangga, agar yigirmadan ko‘p bo‘lsa - qizil rangga bo‘yang.