JavaScript'te Sınıflarla Stilleme
Elemanları style özniteliği
üzerinden stillemek bazen kullanışlı olsa da,
çoğu zaman en iyi fikir değildir. Sorun,
stillerin JavaScript dosyasına dağılması
ve değiştirmenin zahmetli olmasıdır.
Stilleri, JavaScript koduna dalmadan
kolayca değiştirebilmek için CSS dosyalarında
tanımlamak çok daha uygundur.
Örnek olarak, bir mesaj gösteren bir elemanımız olsun. Mesaj "iyi" olabilir ve yeşil renkte gösterilebilir veya "kötü" olabilir ve kırmızı renkte gösterilebilir. Böyle bir durumda en iyi çözüm, bunun için ilgili CSS sınıflarını oluşturmak olacaktır:
.success {
color: green;
}
.error {
color: red;
}
Şimdi "iyi" bir mesaj gösterirken elemana "iyi" sınıfını vereceğiz:
elem.textContent = 'good';
elem.classList.add('success');
"Kötü" bir mesaj gösterirken ise elemana "kötü" sınıfını vereceğiz:
elem.textContent = 'bad';
elem.classList.add('error');
Sayılar içeren paragraflar verilmiştir. Bu paragrafları bir döngü ile gezin ve çift sayılar içeren paragrafları kırmızı, tek sayılar içerenleri ise yeşil renge boyayın.
