Tyylittely luokilla JavaScriptissä
Elementtien tyylittely style-attribuutin kautta
on joskus kätevää, mutta useimmiten - ei
kaikkein onnistunein idea. Ongelmana on, että tyylit
hajallaan JavaScript-tiedostossa
ja niiden muuttaminen on työlästä.
Paljon kätevämpää on asettaa tyylit CSS-
tiedostoihin, jotta niitä voidaan helposti muuttaa,
kaivelematta JavaScript-koodia.
Olkoon esimerkkinä elementti, joka näyttää jonkin viestin. Viesti voi olla "hyvä" ja näytetään vihreällä värillä ja "huono" ja näytetään punaisella värillä. Paras ratkaisu tässä tapauksessa on tehdä vastaavat CSS-luokat:
.success {
color: green;
}
.error {
color: red;
}
Nyt "hyvän" viestin näyttämisen yhteydessä annamme elementille "hyvän" luokan:
elem.textContent = 'good';
elem.classList.add('success');
Ja "huonon" viestin näyttämisen yhteydessä annamme elementille "huonon" luokan:
elem.textContent = 'bad';
elem.classList.add('error');
Annetut kappaleet numeroilla. Käy läpi nämä kappaleet silmukalla ja väritä parillisia numeroita sisältävät kappaleet punaisella, ja parittomia - vihreällä.
