Data- atributu vasitəsilə JavaScript-də stillərin dəyişdirilməsi

Əvvəlki dərsdə təsvir olunan problemi həll etmək üçün, biz elementə sinif təyin etməyəcəyik, əvəzində data- atributunun dəyərini dəyişəcəyik. Bu, onunla əlverişlidir ki, belə bir atribut yalnız bir dəyərə malik ola bilər və yeni dəyər yazıldıqda köhnə dəyər avtomatik olaraq silinəcək.

Məsələn, uğurlu stili belə təyin edəcəyik:

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

Xəta stili üçün isə belə:

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

Vəziyyətlərimizin stillərini atribut selektorları vasitəsilə təyin edəcəyik:

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

İndi biz asanlıqla elementimizi uğurlu rəngə boyaya bilərik:

elem.dataset.type = 'success';

Xəta rənginə isə belə boyayacayıq:

elem.dataset.type = 'error';

Bir input verilib. Fokus itirildikdə onun içərisinə daxil edilmiş ədədi yoxlayın. Əgər bu ədəd ondan kiçikdirsə, inputu yaşıl rəngə boyayın, ondan iyirmiyə qədər olarsa - sarı rəngə, iyirmidən çox olarsa isə - qırmızı rəngə boyayın.