Změna vzhledu stránky

Zásadní věc je, že styl se bude měnit pomocí CSS, kdy JavaScript nastaví příslušnou třídu.

Přebarvit záhlaví:

  1. Různé designy budou buď ve zvláštních CSS souborech,
  2. nebo přímo v jednom a všechny selektory pro daný vzhled budou začínat společnou třídou.

Změna třídy <body>/<html>

Asi nejjednodušší řešení – v jednou souboru budou styly pro všechny dostupné designy.

.cervena h1 {color: red}
.zelena h1 {color: green}
.modra h1 {color: blue}

A teď, když se JavaScriptem nastaví třída pro <body> na cervena, budou všechny nadpisy na stránce červené.

function setDesign(designName) {
	document.body.className = designName;
}
<button onclick='setDesign("cervena")'>Červená</button>

Změna CSS souboru

Pokud by změna měla být komplexnější než pár barviček, nabízí se změnit celé CSS. To už ale nebude okamžité jako prohazování tříd (CSS soubor se musí načíst).

Stačí elementu <link> přidat ID (nebo jej zaměřit přes jméno značky a číslo indexu (getElementsByTagName)) a podle toho měnit element.href.

<link rel=stylesheet href="style.css" id=css>
<script>
function changeCss(styleUrl) {
	document.getElementById("css").href = styleUrl;
	//document.getElementsByTagName("link")[1].href = styleUrl;
}
</script>
<button onclick='changeCss("cervena.css")'>Červená</button>

V případě, že další styly budou jen doplňující k původnímu, bude třeba je přidávat a nechat je se přebíjet.

function addCss(styleUrl) {
	var file = document.createElement("link");
	file.href = styleUrl;
	file.rel = "stylesheet";
	document.getElementsByTagName("head")[0].appendChild(file);
}
<button onclick='addCss("cervena.css")'>Červená</button>

Ukládání a načítání

Aby vybrané téma přežilo přechod na další stránku, je zapotřebí nastavení někam uložit (cookie / localStorage / profil uživatele). A při načtení stránky hodnotu přečíst a podle ní CSS nastavit (ideálně na straně serveru).

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Skrývání a odkrývání

Skrývání a odkrývání textu

Rozbalení a sbalení obsahu po kliknutí.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Lightboxová vstupní stránka

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

Komentáře