Tyylittäminen CSS-luokilla JavaScriptillä

Edellisessä oppitunnissa opimme muuttamaan elementtien CSS-tyylejä muuttamalla style-attribuuttia. Useimmiten tämä ei ole kovin hyvä idea. Asia on niin, että jos CSS-tyylit levitetään JavaScript-koodin yli, on myöhemmin ongelmallista muuttaa verkkosivuston ulkoasua, koska täytyy penkoa JavaScript-koodia etsiessään sinne koodattuja tyylejä.

Mukavampaa jatkoylläpitoa varten olisi lisätä tai poistaa elementistä CSS-luokkia, siten tyylittäen ne halutulla tavalla.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on useita kappaleita:

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

Tehdään niin, että minkä tahansa kappaleen klikkauksella, tämä kappale värjätään johonkin väriin, esimerkiksi vihreäksi. Tätä varten CSS- tiedostossa tehdään erityinen luokka kappaleiden värjäämiseen:

.colored {
	color: green;
}

Luokan käytön etuna on, että nyt on helppo vaihtaa haluttu väri - tätä varten täytyy vain tehdä muutos CSS-tiedostoon, penkomatta JavaScript- koodia. Erityisen kätevää tämä on siinä tapauksessa, että JavaScript-koodia kirjoitat sinä, ja myöhemmin sitä tyylittää joku toinen (mahdollisesti vähemmän pätevä henkilö, joka osaa työskennellä vain CSS:llä).

Joten nyt, luokan käyttöönoton jälkeen, minkä tahansa kappaleen klikkauksella voidaan muuttaa sen väriä, yksinkertaisesti lisäämällä sille luokkamme:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // lisätään kappaleelle luokka
	});
}

Selitä, miksi valitsin luokan nimeksi sanan colored, enkä sanaa green, joka osoittaa selvästi haluamamme värin.

Annettu kappale. Annettu painikkeet 'yliviivaa', 'tee lihavoituna', 'tee punaiseksi'. Tehdään niin, että jokaisen painikkeen painalluksella annettu toiminto tapahtuu kappaleelle (muuttuu punaiseksi, esimerkiksi).