JavaScript'te data- Özniteliği ile Stil Değiştirme

Önceki derste açıklanan sorunu çözmek için, elemana sınıflar vermeyeceğiz, bunun yerine bir data- özniteliğinin değerini değiştireceğiz. Bunun kullanışlı tarafı, böyle bir özniteliğin sadece bir değeri olabilmesi ve yeni bir değer atandığında eski değerin otomatik olarak silinmesidir.

Örnek olarak, başarılı stili şu şekilde ayarlayacağız:

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

Hata için stil ise şöyle:

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

Durumlarımızın stillerini öznitelik seçicileri ile ayarlayacağız:

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

Şimdi elemanımızı kolayca başarılı renge boyayabiliriz:

elem.dataset.type = 'success';

Hata rengine ise şöyle boyarız:

elem.dataset.type = 'error';

Bir input verilmiştir. Odak kaybolduğunda içine girilen sayıyı kontrol edin. Eğer bu sayı ona kadarsa, inputu yeşil renge boyayın, eğer on ile yirmi arasındaysa - sarıya, eğer yirmiden fazlaysa - kırmızıya.