Dieses Beispiel basiert auf der Fragen nach einem Wechsler für CSS Dateien, um den Besuchern die Möglichkeit zu geben, aus mehreren Stylesheets zu wählen. Die Auswahl wird dabei für 30 Tage in einem Cookie gespeichert und beim nächsten Anzeigen der Seite automatisch verwendet.
Die Demo wechselt zwischen zwei einfachen CSS Dateien, die erste mit einem weißen, die zweite mit einem gelben Hintergrund als Angabe im body:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Style Datei wechseln</title>
<link type="text/css" rel="stylesheet" title="style_switch" href="style1.css" />
<script type="text/javascript">
// CSS Datei wechseln
function switch_style(css_file) {
var link_list = document.getElementsByTagName('link');
for (var i = 0, l = link_list.length; i < l; i++) {
if (link_list[i].getAttribute('rel') == 'stylesheet' &&
link_list[i].getAttribute('title') == 'style_switch') {
link_list[i].href = css_file + '.css';
}
}
// Cookie setzen
var time = new Date(); // Aktuelles Datumä
time = new Date(time.getTime() + 2592000000); // +30 Tage
time = time.toGMTString(); // Ausgabe formatieren
document.cookie = 'css_switch=' + css_file + '; expires=' + time + ';';
}
// Style beim Laden aus Cookie vorwählen
function check_style() {
if (document.cookie) {
if (document.cookie.match('css_switch=([^;]*)')) {
switch_style(RegExp.$1);
}
}
}
</script>
</head>
<body onload="check_style()">
<div style="text-align:center">
<b>Styleheet Datei wechseln</b>
<br /><br />
<a href="#" onclick="switch_style('style1')">Style 1 (weiß)</a> -
<a href="#" onclick="switch_style('style2')">Style 2 (gelb)</a>
</div>
</body>
</html>Durch Klick auf einen der Links wird die Funktion switch_style() aufgerufen. Diese erwartet als Parameter den Namen der CSS Datei (kann auch mit Pfadangabe sein, jedoch immer ohne .css Erweiterung). Die gewählte Datei wird dann automatisch in diesen link-Tag eingefügt:
<link type="text/css" rel="stylesheet" title="style_switch" href="style1.css" />Durch das title Attribut mit dem Wert “style_switch” wird sichergestellt, dass die CSS Datei auch wirklich nur in diesem und keinem anderen (falls mehrere CSS Dateien gleichzeitig eingebunden werden) gewechselt wird.
