Změna designu bez znovunačtení stránky
Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.
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í:
- Různé designy budou buď ve zvláštních CSS souborech,
- 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).
Související články
Možnosti stylování <iframe>
Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.
Zvýraznění aktivní sekce při rolování
Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.
