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).
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.