Stilizavimas naudojant CSS klases JavaScript

Ankstesnėje pamokoje mes išmokome keisti elementų CSS stilius keičiant style atributą. Dažniausiai tai nėra labai gera idėja. Esminis dalykas yra tas, kad jei išsklaidysite CSS stilius per JavaScript kodą, vėliau bus problemiška pakeisti svetainės dizainą, nes teks krapštytis JavaScript kodą ieškant ten įstrigusių stilių.

Patogiau tolesnei priežiūrai būtų pridėti arba pašalinti elemento CSS klases, taip suteikiant jiems norimą išvaizdą.

Pažiūrėkime pavyzdžiu. Tarkime, mes turime kelis pastraipas:

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

Padarykime taip, kad paspaudus bet kurią pastraipą, ši pastraipa nusidažytų kokią nors spalvą, pavyzdžiui, žalią. Tam CSS failuose sukurkime specialią klasę pastraipų dažymui:

.colored {
	color: green;
}

Klasės naudojimo pranašumas yra tas, kad dabar lengvai galima bus pakeisti norimą spalvą - tam reikės tiesiog atlikti pakeitimą CSS faile, neliesiant JavaScript kodo. Ypač patogu tai bus tuo atveju, jei JavaScript kodą rašote jūs, o vėliau jį stilizuos kažkas kitas (galbūt mažiau kvalifikuotas žmogus, mokantis dirbti tik su CSS).

Taigi, dabar, sukurus klasę, paspaudus bet kurią pastraipą galima pakeisti jos spalvą, tiesiog pridėjus jai mūsų klasę:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // pridedame pastraipai klasę
	});
}

Paaiškinkite, kodėl aš pasirinkau klasės pavadinimą žodį colored, o ne žodį green, aiškiai nurodantį mūsų norimą spalvą.

Duota pastraipa. Duoti mygtukai 'perbraukti', 'paryškinti', 'padaryti raudoną'. Tegul paspaudus kiekvieną mygtuką nurodytas veiksmas atliekamas su pastraipa (tampa raudona, pavyzdžiui).