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:

css.success {
  color: green;
}
.error {
  color: red;
}

Şimdi "iyi" bir mesaj gösterirken elemana "iyi" sınıfını vereceğiz:

javascriptelem.textContent = 'good';
elem.classList.add('success');

"Kötü" bir mesaj gösterirken ise elemana "kötü" sınıfını vereceğiz:

javascriptelem.textContent = 'bad';
elem.classList.add('error');