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:

html<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:

css.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:

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

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