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 einselect-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>
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
}
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 alslink-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">');
}
Hinweise
Am besten und einfachsten ist es, wenn der Lade-Vorgang in einer externen Datei gespeichert und vor allen anderen CSS-Definitionen imhead 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.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project