Změna vzhledu

Jak stránka vypadá (barvy, velikosti, písma), popisuje CSS. Pravidlo CSS má selektor, který říká, na které prvky se pravidlo použije, a pak ve složených závorkách to, jak mají vypadat:

h1 {
    color: purple;
    background-color: yellow;
}

Podle tohoto pravidla bude hlavní nadpis fialový na žlutém pozadí. color (barva) a background-color (barva pozadí) jsou vlastnosti CSS, purple a yellow jejich hodnoty. Stránka může mít CSS v prvku style v head; jeden takový najdete v index.html tohoto cvičení.

JavaScript může změnit vzhled jednoho prvku přes jeho vlastnost style:

const nadpis = document.querySelector("h1");
nadpis.style.color = "purple";
nadpis.style.fontSize = "48px";

Hodnoty jsou text v uvozovkách, zapsaný stejně jako v CSS. Názvy vlastností CSS se spojovníkem se v JavaScriptu zapisují v camelCase: z background-color je backgroundColor, z font-size je fontSize. Spojovník totiž v JavaScriptu znamená minus: zápis nadpis.style.background-color = "yellow"; by JavaScript četl jako odčítání nadpis.style.background - color a výsledku odčítání nelze přiřadit hodnotu. Nespustil by se pak vůbec žádný kód ze skriptu a konzole by ukázala SyntaxError: Invalid left-hand side in assignment.

Nastavovat styly jeden po druhém je zdlouhavé. Častěji se vzhled připraví v CSS stránky jako třída a JavaScript pak třídu prvku jen přidá nebo odebere. Stránka v tomto cvičení má například seznam (ul, v němž je každá položka prvek li) a toto pravidlo CSS pro prvky s třídou hotovo:

.hotovo {
    color: gray;
    text-decoration: line-through;
}

Každý prvek má vlastnost classList s těmito metodami:

• classList.add("hotovo") přidá prvku třídu hotovo,
• classList.remove("hotovo") ji odebere,
• classList.toggle("hotovo") ji přidá, pokud ji prvek nemá, a odebere, pokud ji má. To se hodí u tlačítek, jak uvidíte v dalším cvičení.

Název třídy pište bez tečky: add("hotovo"), ne add(".hotovo"). Tečka patří jen do selektorů. S ní byste přidali třídu s názvem .hotovo, které žádné pravidlo CSS neodpovídá, a nic by se nezměnilo.