Stylování pomocí CSS tříd v JavaScriptu

V předchozí lekci jsme se naučili měnit CSS styly prvků prostřednictvím změny atributu style. Často to není příliš dobrý nápad. Problém je v tom, že pokud rozptýlíme CSS styly do JavaScriptového kódu, bude následně problematické změnit design webu, protože bude nutné prohledávat JavaScriptový kód a hledat v něm zakotvené styly.

Pro další údržbu bude pohodlnější přidávat nebo odebírat prvkům CSS třídy, čímž je stylujeme požadovaným způsobem.

Podívejme se na příklad. Předpokládejme, že máme několik odstavců:

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

Udělejme to, aby po kliknutí na libovolný odstavec byl tento odstavec obarven nějakou barvou, například zelenou. K tomu v CSS souboru vytvoříme speciální třídu pro barvení odstavců:

.colored {
	color: green;
}

Výhoda použití třídy spočívá v tom, že nyní lze snadno změnit požadovanou barvu - stačí pouze provést změnu v CSS souboru, bez zásahu do JavaScriptového kódu. To bude obzvláště výhodné v případě, že JavaScriptový kód píšete vy, a následně ho bude stylovat někdo jiný (pravděpodobně méně kvalifikovaná osoba, která umí pracovat pouze s CSS).

Takže nyní, po zavedení třídy, po kliknutí na libovolný odstavec lze změnit jeho barvu jednoduše přidáním naší třídy:

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

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // přidáme odstavci třídu
	});
}

Vysvětlete, proč jsem pro název třídy zvolil slovo colored, a ne slovo green, které explicitně odkazuje na požadovanou barvu.

Je dán odstavec. Jsou dány tlačítka 'přeškrtnout', 'zvýraznit tučně', 'obarvit na červeno'. Po stisknutí každého tlačítka ať se s odstavcem provede daná akce (například se obarví na červeno).