Layout aanpassen door van stylesheet te wisselen
Deze pagina ziet er uit als alle andere op deze website. Maar als je op de knop hiernaast klikt, verandert de opmaak. Als je er weer op klikt, komt de oude opmaak weer terug.
Dit effect wordt bereikt met twee verschillende stylesheets. Door op de knop te klikken wordt een JavaScript-functie uitgevoerd. Die kijkt welke van de twee stylesheets actief is, schakelt dat uit en activeert het andere sheet.
Op deze bladzijde wordt uitgelegd hoe je dat kunt aanpakken. De JavaScript- en CSS-code van deze pagina kun je downloaden om zelf mee te experimenteren.
- Er worden twee items besproken:
- Inbouwen in je eigen website
- De werking van het script
- Voor deze aanpak heb je twee .css-bestanden nodig, die je linkt vanuit de <HEAD>. Je gebruikt daarvoor
de gebruikelijke tags, met dien verstande dat ze allebei een title-attribuut hebben. Op deze bladzijde is gebruikt:
<link rel="stylesheet" href="demostylea.css" title="Normaal">
<link rel="stylesheet" href="demostyleb.css" title="Bijzonder"> - Het bestand demostylea.css heeft title="Normaal".
Het bestand demostyleb.css heeft title="Bijzonder". - De title-attributen worden gebruikt door JavaScript om beide bestanden van elkaar te onderscheiden.
- Het wisselen van stylesheet (lees: het veranderen van de opmaak) gebeurt door het uivoeren van de function setStyle(). Op deze bladzijde gebeurt dat met de knop "Andere opmaak", maar het kan ook met een gewone <a>-tag, een mouseover, enz.
- Om zeker te zijn dat de pagina altijd begint met het juiste stylesheet, moet dit na het laden van de pagina apart worden
ingesteld. Dat gebeurt met de event-handler onload="activateStyle('Normaal')" in de <body>-tag.
Dit is nodig omdat de verschillende browsers elk op hun eigen manier manier omgaan met stylesheets, in het bijzonder welke style er actief is: de eerste of de laatste. - In beide css-bestanden moeten dezelfde classes en id's voorkomen. Doordat die elk de opmaak van de bladzijde op een andere manier definiëren ziet de bladzijde er anders uit.
Opmerking: Als je behalve de twee styleheets demostylea.css en demostyleb.css nog meer stylesheets hebt die altijd actief zijn, link je die ook in de <HEAD>, echter zonder title- attribuut. De functions activateStyle() en setStyle() laten die stylesheets ongemoeid.
De werking van het JavaScript is -zonder in detail te treden- als volgt:
- De lijst van alle <link>-tags die in het document staan wordt doorlopen. De data (een object voor elke tag) wordt opgehaald met behulp van standaard JavaScript function getElementsByTagName(name) en opgeslagen in de variabele <linktag>. De parameter name is de naam van de gezochte tag.
- De function activateStyle(thename) wordt uitgevoerd als de pagina geheel is geladen.
- Als de attributen 'rel' en 'title' aanwezig zijn, is het een stylesheet van de soort waar we mee bezig zijn; het wordt inactief gemaakt. Anders wordt dat sheet overgeslagen.
- Als de eigenschap title van de link-tag gelijk is aan thename wordt het sheet actief gemaakt, waardoor de browser de lay-out in dat stylesheet gaat toepassen.
- De JavaScript-function setStyle() wordt (na een druk op de knop) opgeroepen om de stylesheets om te wisselen.
Daarvoor kijkt het of de title van het actieve stylesheet gelijk is aan "Normaal".
Als dat zo wordt het sheet inactief gemaakt en wordt het sheet "Bijzonder" geactiveerd, anders wordt het sheet "Bijzonder" inactief gemaakt en wordt "Normaal" geactiveerd.
Op deze bladzijde wordt een script gebruikt waarmee naar het title-attribuut van de stylesheets wordt gezocht. Het kan echter ook anders, bijvoorbeeld door te zoeken naar een bepaalde bestandsnaam.
Deze techniek is zeer geschikt voor het maken van printervriendelijke pagina's.
Het is mogelijk de laatste keuze van de bezoeker met behulp van een cookie te bewaren op zijn eigen PC. Het werken met cookies wordt beschreven in het item Cookies: Gegevens van je website onthouden.
Om goed kennis te nemen van de vele mogelijkheden van deze techniek, is een bezoek aan CSS Zen Garden een absolute must. Steeds dezelfde site, opgemaakt op tientallen verschillende manieren, wat wordt bereikt door alleen van stylesheet te wisselen.
Gebruik:
- De code staat in de <HEAD>.
- De <BODY> bevat de aanroepen van het JavaScript.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="demostylea.css" title="Normaal">
<link rel="stylesheet" href="demostyleb.css" title="Bijzonder">
<script>
function activateStyle(thename) {
var linktag;
for (var i=0; (linktag =
document.getElementsByTagName("link")[i]); i++) {
if (linktag.getAttribute("rel").indexOf("style") != -1 &&
linktag.getAttribute("title")) {
linktag.disabled = true;
if (linktag.getAttribute("title") == thename) linktag.disabled = false;
}
}
}
function setStyle() {
var linktag, helper;
for (var i=0; (linktag =
document.getElementsByTagName("link")[i]); i++) {
if (linktag.getAttribute("rel").indexOf("style") != -1 &&
linktag.getAttribute("title")) {
if (!linktag.disabled){
helper = linktag.getAttribute("title");
if (helper == "Normaal") activateStyle("Bijzonder")
else activateStyle("Normaal");
break;
}
}
}
}
</script>
(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).
(Neem onderstaand attribuut op in de <BODY>-tag).<button type="button" onclick="setStyle()"
value="Andere opmaak">Andere opmaak</button>
In de code hierboven zijn sommige regels voor de leesbaarheid over twee regels verdeeld.onload="activateStyle('Normaal')"
In je webpagina moet dat op één regel staan!
Downloaden:
Druk op de knop:
File: voorb303.zip, 1816 bytes.
Opmerking:
Het lettertype dat het stylesheet demostyleb.css toepast, wordt wordt ingesteld met behulp van @font-face. Die techniek
wordt beschreven in het item Niet-standaard fonts gebruiken.
Het is ook mogelijk om alleen een paragraaf of een enkele kop te veranderen. De aanpak wordt beschreven in het item
Lettergrootte en -opmaak wijzigen.
