Stílusok alkalmazása CSS osztályokkal JavaScript segítségével

Az előző leckében megtanultuk, hogyan változtathatjuk meg az elemek CSS stílusát az style attribútum módosításával. Legtöbbször ez nem túl jó ötlet. Azért, mert ha szétszórjuk a CSS stílusokat a JavaScript kódban, a jövőben problémás lesz megváltoztatni a weboldal designját, mivel be kell majd turkálnunk a JavaScript kódba az oda beégetett stílusok keresése érdekében.

A karbantartás szempontjából kényelmesebb az elemekhez CSS osztályokat hozzáadni vagy elvenni, ezáltal a kívánt módon stílusozva azokat.

Nézzünk egy példát. Tegyük fel, hogy van néhány bekezdésünk:

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

Tegyük fel, hogy bármelyik bekezdésre kattintáskor az a bekezdés valamilyen színre színeződik, például zöldre. Ehhez a CSS fájlban készítsünk egy speciális osztályt a bekezdések színezésére:

.colored {
	color: green;
}

Az osztály használatának az előnye, hogy most könnyen meg lehet változtatni a kívánt színt - ehhez egyszerűen módosítani kell a CSS fájlt, anélkül, hogy a JavaScript kódot kellene turkálni. Különösen kényelmes ez abban az esetben, ha a JavaScript kódot te írod, és a jövőben valaki más fogja stílusozni (esetleg kevésbé képzett személy, aki csak CSS-sel tud dolgozni).

Szóval, most, hogy bevezettük az osztályt, bármelyik bekezdésre kattintáskor megváltoztathatjuk a színét, egyszerűen hozzáadva neki az osztályunkat:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // hozzáadjuk a bekezdéshez az osztályt
	});
}

Magyarázza meg, miért választottam az osztály nevének a colored szót, ahelyett, hogy a green szót használtam volna, ami egyértelműen utal a kívánt színre.

Adott egy bekezdés. Adott gombok 'áthúzás', 'félkövérré tétel', 'pirossá tétel'. Legyen úgy, hogy minden gomb megnyomásakor a megadott művelet végrehajtódik a bekezdéssel (például pirossá válik).