JavaScript ile CSS Sınıfları Kullanarak Stilleme

Önceki derste, öğelerin CSS stillerini style özniteliğini değiştirerek nasıl değiştireceğimizi öğrendik. Çoğu zaman bu pek iyi bir fikir değildir. Bunun nedeni, CSS stilleri JavaScript koduna yayarsanız, site tasarımını daha sonra değiştirmenin sorunlu olacağıdır, çünkü içine gizlenmiş stilleri aramak için JavaScript kodunu kurcalamanız gerekecektir.

İleriki bakım için daha uygun olanı, öğeye CSS sınıfları eklemek veya çıkarmak, böylece onları istenen şekilde stilize etmek olacaktır.

Bir örnek üzerinden görelim. Elimizde birkaç paragraf olsun:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Herhangi bir paragrafa tıklandığında, o paragrafın bir renge, örneğin yeşile boyanmasını sağlayalım. Bunun için CSS dosyasında paragrafları renklendirmek üzere özel bir sınıf oluşturalım:

.colored {
	color: green;
}

Sınıf kullanmanın avantajı şudur, artık istenen rengi değiştirmek kolaydır - bunun için sadece CSS dosyasında bir değişiklik yapmak yeterli olacak, JavaScript kodunu kurcalamaya gerek kalmayacaktır. Bu özellikle şu durumda çok uygundur: JavaScript kodunu siz yazıyorsunuz ve daha sonra onu stilize edecek olan başka biri (muhtemelen sadece CSS ile çalışabilen daha az nitelikli bir kişi) olacaktır.

Şimdi, sınıfı tanımladıktan sonra, herhangi bir paragrafa tıklandığında rengini değiştirmek için, sadece ona sınıfımızı eklemek yeterlidir:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // paragrafa sınıf ekliyoruz
	});
}

Sınıf adı olarak neden istediğimiz rengi açıkça belirten green kelimesi yerine colored kelimesini seçtiğimi açıklayın.

Bir paragraf verilsin. 'üstü çizili', 'kalın yap', 'kırmızı yap' düğmeleri verilsin. Her düğmeye basıldığında belirtilen işlemin paragrafta gerçekleşmesini sağlayın (örneğin kırmızı olur).