Styleswitcher mit Javascript ohne Cookies und PHP

[walterbt]

Hallo,

habe eine "index" Seite die mit Tabellen aufgebaut ist und der Content wird über einen "iframe" eingefügt. In der "index" Seite habe ich nun 2 Grafiken drin mit denen ich die Schriftgröße ändern möchte (klein oder groß). Diese soll sich nicht (oder nicht nur) in der "index" Seite ändern sondern in diesem iframe wo eine HTML Datei eingebunden wird.

Für die Erstellung kann ich kein PHP verwenden (es wird eine Bewerbungshomepage die ich auf CD verteilen will) und auch keine Cookies einsetzen. Daher kann es natürlich nicht gespeichert werden welche CSS Datei bevorzugt sein soll, was ich aber OK finde.

Ich habe in jeder HTML Datei eine bevorzugte CSS Datei mit normaler Schriftgröße und eine alternative CSS Datei mit einer größeren Schriftgröße.

Nun suche ich ein Javascript wo ich entweder die eine oder die andere CSS Datei aktivieren kann und dies auf die HTML Datei im iframe anwendet die gerade geöffnet ist.

Habe bisher diesen gefunden http://www.thestyleworks.de/tut-art/...itcher_1.shtml allerdings verwendet er leider eben Cookies.

[hero-master]

Vielleicht weiß man im JS-Forum mehr

[Malleus]

...hab' mal so etwas ähnliches gebaut: Vielleicht kannst Du das ja einsetzen:

Test

[Nightline]

Hallo Malleus!

Schöne Lösung! Habe da aber zwei Fragen an dich zu deinem Script:

1.) Wieso hast du hier am Ende einen , statt ;?

var cssNames=[ "tpcss1.css","tpcss2.css" ],

2.) Wann ändert sich der Wert cssMode? Für mich ist er immer 0...

<script language="JavaScript" type="text/javascript">

var cssNames=[ "tpcss1.css","tpcss2.css" ],
cssMode=0;

function changeStyleSheet()
{
document.getElementById('myCSS').href=cssNames[cssMode=1-cssMode];
}
</script>

[Malleus]

Zitat von Nightline

Hallo Malleus!

1.) Wieso hast du hier am Ende einen , statt ;?

var cssNames=[ "tpcss1.css","tpcss2.css" ],
cssMode=0;

Ich versuche meine Scripte immer "möglichst" klein zu halten, d.h. das Script wird schneller geladen und es wird weniger Traffic erzeugt. Meine Spielscripte sind teilweise sehr groß und so bekomme ich sie etwas schneller zum Spieler. Dieser Programmierstil ist aber nicht jedermanns Sache, aber okay.

ich hätte auch schreiben können:

var cssNames=[ "tpcss1.css","tpcss2.css" ];
var cssMode=0;

d.h. man kann mehrere lokale Variablen durch ein "," und ein "var" definieren.

Also

var a,b,c,d=0,e=1,f;

Wann ändert sich der Wert cssMode? Für mich ist er immer 0...

Auch wieder ein kleiner Programmiertrick:

function changeStyleSheet()
{
document.getElementById('myCSS').href=cssNames[cssMode=1-cssMode];
}

Entscheidend ist "cssMode=1-cssMode";
d.h. beim ersten Mal "changen" und cssMode==0 rechne ich
cssMode=1-0 d.h. cssMode=1;
Wenn ich das nächste Mal klicke, cssMode=1-1 d.h. cssMode==0.
Diese Zuweisung mache ich bei der Adressierung von cssNames[...].

Bitte wegen dieses Programmierstils nicht schlagen, aber ich programmiere seit über 20 Jahren so ( Assembler, Pascal, C++, usw). und es kam bei mir immer auf die Geschwindigkeit und die Codegröße an.

function changeStyleSheet()
{
cssMode=1-cssMode;
document.getElementById('myCSS').href=cssNames[cssMode];
}

bzw.

function changeStyleSheet()
{
if (cssMode==0) cssMode=1;
else cssMode=0;
document.getElementById('myCSS').href=cssNames[cssMode];
}

bzw.

function changeStyleSheet()
{
cssMode=(cssMode==0)?1:0;
document.getElementById('myCSS').href=cssNames[cssMode];
}

Okay?

[Nightline]

Ok, das mit dem mehrfachen Initialisieren ist mir eh klar, der Zeilenumbruch hat mich da ordentlich auf dem Schlauch stehen lassen.

Gerade deinen Programmierstil mit seinen kleinen Tricks finde ich immer wieder faszinierend beim Mitlesen. Ich finde sie einfach elegant und prägnant, sowas lerne ich sehr gerne!

Also vielen Dank für die Aufklärung!

[Malleus]

..freut mich zu hören