Stiilide muutmine CSS-klasside abil JavaScriptis

Eelmises tunnis õppisime muutma elementide CSS-stiile atribuudi style muutmise kaudu. Enamasti pole see väga hea mõte. Asi on selles, et kui CSS-stiilid laiali jagada JavaScripti koodis, on edaspidi problemaatiline veebisaidi disaini muuta, kuna tuleb otsida JavaScripti koodist sinna sisse kirjutatud stiile.

Mugavam on edasiseks toetamiseks lisada või eemaldada elemendilt CSS-klasse, muutes neid seeläbi soovitud viisil stiiliks.

Vaatame näidet. Olgu meil mõni lõik:

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

Teeme nii, et mis tahes lõigu peale klõpsates värvitakse see lõik mingisse värvi, näiteks roheliseks. Selleks teeme CSS faili spetsiaalse klassi lõikude värvimiseks:

.colored {
	color: green;
}

Klassi kasutamise eelis on selles, et nüüd on lihtne soovitud värvi muuta - selleks tuleb lihtsalt teha muudatus CSS-failis, ilma et peaks JavaScripti koodi sisse puutuma. Eriti mugav on see juhul, kui JavaScripti koodi kirjutate teie, ja edaspidi stiilida seda keegi teine (võib-olla vähem kvalifitseeritud isik, kes oskab töötada ainult CSS-iga).

Nii, nüüd, peale klassi kasutuselevõttu, klõpsates mis tahes lõigul saab muuta selle värvi, lihtsalt lisades sellele meie klassi:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // lisame lõigule klassi
	});
}

Selgitage, miks ma valisin klassi nimeks sõna colored, mitte sõna green, mis osutab otseselt soovitud värvile.

Antud lõik. Antud nupud 'läbikriipsuta', 'muuda paksuks', 'muuda punaseks'. Olgu nii, et iga nupu vajutamisel antud tegevus toimub lõiguga (muutub näiteks punaseks).