Úprava stylů za běhu: Jak měnit CSS z JavaScriptu

Nauč se dynamicky měnit barvy, velikosti a vzhled prvků. Zjistíš, jak CSS a JavaScript pracují spolu na animacích a efektech, které opravdu fungují.

11 min čtení Středně pokročilý Únor 2026

Otevřený notebook s poznámkami, tužka a kód JavaScriptu na obrazovce v pozadí

Proč dynamické styly změňují všechno

Statické CSS je super, ale je to jen část příběhu. Když chceš vytvořit web, který reaguje na to, co dělá uživatel — klikání, scrollování, interakce — potřebuješ JavaScript.

Tady není žádný kouzelný trik. Je to prostě způsob, jak říci tvému prohlížeči: “Když se stane X, změň CSS na Y.” A když to zvládneš správně, tvůj web bude vypadat jako živý.

                  Co se naučíš
                
                    Základní metody pro změnu stylů z JavaScriptu
                  
                    Jak pracovat s třídami místo inline stylů
                  
                    Praktické příklady animací a efektů
                  
                    Optimalizace pro lepší výkon

Tři základní způsoby, jak měnit styly

Máš tři hlavní cesty. Každá má své místo, každá se hodí pro něco jiného.

Inline styly — to je element.style.color = ‘red’. Funguje to. Ale je to nejhorší volba, protože se ti ztrácí přehled v kódu. Pokud máš dvacet prvků a měníš jim barvy inline, za týden na to koukat nebudeš moct.

Mnohem chytřeji se to dělá přes třídy. Definuješ si v CSS, jak má prvek vypadat (barva, velikost, vše), a pak v JavaScriptu jen přidáš nebo odebereš tu třídu. Kód je čitelný, CSS je na jednom místě, všechno se hezky řeší.

A pak je tu data-atribut cesta — když potřebuješ jednu konkrétní hodnotu, kterou chceš měnit bez CSS tříd. Třeba barva na základě teplotní stupnice.

Diagram tří metod pro změnu stylů v JavaScriptu s příklady kódu

JavaScript kód na tmavém pozadí s zvýrazněným textem a kurzorem

classList je tvůj nejlepší kamarád

Zapomeň na element.className. To je stará cesta. Dnes máš classList, a je to skvělé.

classList.add(‘active’) — přidá třídu. classList.remove(‘active’) — ji odebere. classList.toggle(‘active’) — pokud tam je, vezme ji, pokud tam není, přidá ji. To je přesně to, co potřebuješ pro tlačítka, modaly, menu — prostě všechno, co se zapíná a vypíná.

A co je nejlepší? Tvůj CSS je v CSS souboru, JavaScript je v JavaScriptu. Když chceš zmenit barvu, ideš do CSS. Když chceš zmenit logiku, ideš do JavaScriptu. Všechno má své místo.

Praktické příklady, které opravdu fungují

Tady máš tři věci, které uvidíš na každém druhém webu. A teď víš, jak je postavit.

Tlačítko se mění po kliknutí

Nejjednoduší věc. Máš tlačítko, uživatel na něj klikne, změní barvu a text. To je toggle — přepínaš mezi dvěma stavy.

V CSS máš .button-active s jinou barvou. V JavaScriptu: button.addEventListener(‘click’, () => button.classList.toggle(‘active’)).

Menu se otevírá a zavírá

Při kliknutí na hamburger se objeví navigace. Je to stejný princip jako tlačítko, jen s více prvky. Jeden klik na ikonu, a všechna menu položky se změní z display: none na display: block.

classList.toggle je opět tvůj pomocník. Jeden řádek kódu, a máš funkční responzivní menu.

Světlý a tmavý režim

Uživatel chce tmavý web v noci. Klikne na ikonu, a všechno se změní. V CSS máš dvě sady barev. V JavaScriptu přidáš třídu ‘dark’ na body element.

CSS pak řeší všechno ostatní. Prostě: body.dark h1 { color: #fff; } — a hotovo. Jedno přepnutí třídy, a celý design se změní.

Jak nezbrzdit svůj web

Pokud začneš měnit styly v každém event listeneru, tvůj web se může zpomalit. Zvlášť když měníš více prvků najednou.

Pravidlo je jednoduché: měň třídy, ne jednotlivé vlastnosti. classList.add je rychlý. Měnit element.style.color, element.style.fontSize, element.style.padding pětkrát za sebou je pomalé. Prohlížeč musí pokaždé přepočítat layout.

Pokud potřebuješ animaci, CSS transitions jsou tvůj přítel. Definuješ transition: all 0.3s ease v CSS, a pak jen změníš třídu. Animace běží v CSS, což je rychlejší než JavaScriptové animace.

A pokud máš stovky prvků, které se mají zmenit, neměň každý zvlášť. Změň rodičovský prvek a používej CSS cascading. Jeden click, jeden class toggle na kontejneru, a všechny děti se změní přes CSS.

Graf s metrikami výkonu webu, časy renderování a animací

Pět věcí, které tě urychlí

Vždy používej classList

Není žádný důvod pro element.className = ‘…’ ClassList je moderní, čitelnější a bezpečnější.

CSS transitions jsou zdarma

Když změní třídu, prohlížeč sám vytvoří animaci. Nemusíš nic dělat. Jen přidej transition v CSS a je to.

Testuj na mobilech

Animace a styly se chují jinak na mobilu. Zkontroluj si všechno na skutečném zařízení, ne jen v Chrome DevTools.

Kombinuj CSS a JavaScript

JavaScript řídí logiku, CSS řeší vzhled. To je zlaté pravidlo. Neměň barvy v JavaScriptu, když to můžeš v CSS.

Používej console.log na třídy

Když něco nefunguje, otevři DevTools a zkontroluj si, jaké třídy má prvek. Často je to jen chyba v názvu třídy.

Testuj přístupnost

Když měníš barvy a kontrast, ujisti se, že tvůj web zůstane čitelný pro všechny. Minimálně 4.5:1 poměr kontrastu.

Na závěr: CSS a JavaScript jsou týmem

Nemusíš být expert. Tady máš základy, které tě dovedou dál. Změna stylů z JavaScriptu není nic složitého — je to jen řetězec akcí: uživatel něco udělá, JavaScript to zachytí, změní třídu, CSS dělá zbytek.

Začni malým projektem. Vytvoř si tlačítko, které mění barvu. Pak menu, které se otevírá. Pak světlý/tmavý režim. Pokaždé se naučíš něco nového a tvůj web bude živější.

A pamatuj: čím méně kódu, tím líp. Pokud to zvládneš s classList.toggle, nepoužívej osm řádků kódu. Web, který běží rychle a je jednoduché ho pochopit, je web, který lidi rádi navštěvují.

Zpět na JavaScript Základy

Poznámka o tomto článku

Tento článek je vzdělávacím materiálem určeným k seznámení se základními koncepty změny stylů CSS z JavaScriptu. Příklady a techniky zde popsané jsou relevantní pro moderní webové prohlížeče a nejčastěji používané přístupy. Vždy ověř kompatibilitu s tvými cílovými prohlížeči a zařízením. Webové technologie se vyvíjejí, proto doporučujeme pravidelně sledovat oficiální dokumentaci a nejnovější best practices.