Switch stylesheet with javascript

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”)) {
a.disabled = true;
if(a.getAttribute(“title”) == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”) && !a.disabled) return a.getAttribute(“title”);
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1
&& a.getAttribute(“rel”).indexOf(“alt”) == -1
&& a.getAttribute(“title”)
) return a.getAttribute(“title”);
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/”;
}
function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Met css kan de vormgeving van html- en xml-files in een webbrowser beïnvloed worden. De css code kan worden opgenomen in een aparte file (een stylesheet) waarnaar in de html pagina verwezen wordt. Het is zelfs mogelijk om op die manier verschillende vormgevingen aan een pagina te koppelen. Bijvoorbeeld een vormgeving  die de pagina arrangeert met het oog op uitprinten. Het voorbeeld hieronder laat zien dat mijn blog verschillende stylesheets kent. De bck stijl en de monchau stijl. Klik op de hyperlink onder de plaatjes om de verschillen direkt in de browser te zien.

bck.jpg monchau.jpg

Change style to bck                  Change style to monchau

Het javascript dat voor het ‘switchen’ van de stylesheets zorgt heb ik ooit ergens op het internet gevonden. Ik kan de oorspronkelijke auteur niet terugvinden en hem of haar derhalve ook geen credits geven. Bekijk de html source van deze pagina om het script te zien. De verwijzing naar de stylesheets in de <head> sectie van deze pagina is ook relevant.

One thought on “Switch stylesheet with javascript

  1. Ik vroeg me af of je al had nagedacht over een oplossing met 1 link voor switch naar de 1 of switch naar de ander. Dat heb ik namelijk vanuit jouw script gemaakt (zonder al te veel moeite, dat spreekt voor zich).

Leave a Reply