info@a-coding-project.de

Benutzerdefinierte Style-Angaben mit JavaScript

Viele Surfer kennen das Problem: Beim Besuchen einer Seite sind einige Inhalte nur schwer oder gar nicht zugänglich, weil der Webmaster sie mit den allerschönsten StyleSheets (CSS) so gestaltet hat, wie es ihm zwar gefällt, aber es z.B. nur schwer lesbar ist. Auch sonst ist es nur schwer (außer bei neueren Versionen des Mozilla oder Netscape Navigator) möglich die Style-Angaben des Webmasters so zu verändern, dass sie auch dem User gefallen. Eine Abhilfe kann da ein kleines Script schaffen, das im Folgenden hier erläutert werden soll und das dem Besucher ermöglich selbstständig die StyleSheets aus zu wählen.

Funktionsweise

Die Funktionsweise wird relativ einfach sein: Dem Besucher wird die Möglichkeit geboten selbst StyleSheets für die jeweilige Homepage aus zu wählen. Die Wahl wird innerhalb eines Cookies gespeichert. Bei jedem Aufruf einer Seite der Homepage wird das Script aufgerufen. Es liest den Cookie aus und läd (dynamisch) die jeweils gewählte CSS-Datei ein. Der Benutzer bekommt davon dann nichts mehr mit.

Speichern

Das Speichern läuft - mehr oder weniger - selbstständig. Der Benutzer kann entweder aus einer Liste von zur Verfügung stehenden CSS-Dateien wählen (z.B. über ein select-Feld oder eine Checkbox) oder selbst eine lokale Datei angeben (über ein input-File Feld). Die gewählte Angabe wird dann mit JavaScript in einem Cookie gespeichert.

Beispiel zum Speichern:

<form onSubmit="takeCSS()" action="load.htm" name="form1" method="get">
<input type="Radio" name="cb" checked="checked">
<select name="cssdef">
 <option value="black.css">black
 <option value="green.css">green
 <option value="red.css">red
</select><br>
<input type="Radio" name="cb"><input type="File" name="cssfile"><br>
<br>
<input type="Submit"><input type="reset">
</form>

Das dazugehörige JavaScript-Skript zum Speichern:

function takeCSS()
{
 var a = new Date();
 var b = new Date(a.getTime() + (24*60*60*1000));

 if(document.form1.cb[0].checked == true)
 {
 document.cookie = 'cssdef="'+
                   document.form1.cssdef.options[document.form1.cssdef.selectedIndex].value+
                   '";expires="'+b.toGMTString()+";";
 }
 else
 {
 document.cookie = 'cssdef="file://'+document.form1.cssfile.value+
                   '";expires="'+b.toGMTString()+";";
 }
 alert('Gespeichert');
 location.href = "load.htm";
 return

Im Beispielcode sind zwei Checkboxen, ein select-Feld sowie ein input-File Feld innerhalb eines form's definiert. Das Skript frag ab [Zeile 6], welche Checkbox markiert ist. Wurde die Checkbox für ein vorgegebenes StyleSheet markiert, wird der Wert (value) der ausgewählten option des select's gespeichert [Zeile 8]. Dieser Wert sollte daher den (am besten absoluten) Pfad zur jeweiligen CSS-Datei enthalten. Wurde eine Datei ausgewählt, so wird der Dateiname stattdessen gespeichert [Zeile 12]. Abschließend wird 'Gespeichert' ausgegeben und der Besucher auf eine andere Seite weiter geleitet.

Laden

Das Laden fällt wesentlich einfacher aus. Der angelegte Cookie wird ausgelesen und der Pfad der CSS-Datei ausgelesen. Anschließend wird der Dateiname als link-Element in das Dokument geschrieben.

JavaScript zum Laden:

if(document.cookie)
{
 a = document.cookie;
 a = a.substring(a.indexOf('cssdef')+6,a.length);
 a = a.substring(a.indexOf('=')+2,a.length);
 a = a.substring(0,a.indexOf('"'));
 document.writeln('<link rel="stylesheet" href="'+a+'" type="text/css">');
}
else
{
 document.writeln('<link rel="stylesheet" href="black.css" type="text/css">');

Der Code fragt als erstes ab, ob überhaupt ein Cookie gespeichert wurde. Ist dies nicht der Fall, wird automatisch die Standard-Definition in das Dokument geschrieben [Zeile 11]. Ist ein Cookie vorhanden, wird der Dateiname extrahiert [Zeile 3 bis 6]. Anschließend wird die CSS-Datei in das Dokument geschrieben [Zeile 7].

Hinweise

Am besten und einfachsten ist es, wenn der Lade-Vorgang in einer externen Datei gespeichert und vor allen anderen CSS-Definitionen im head geladen wird (so können ggf. Benuter-Definitionen durch eigene überschrieben werden). außerdem sollten Sie darauf achten, dass die CSS-Dateien existieren und möglichst abolute Pfade verwendet werden, da sonst unter Umständen die Dateien aus Unterverzeichnissen heraus nicht gefunden werden können.

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant