Wie kann ich in HTML-Seiten unter Verwednung von JavaScript dem Anwender eine Funktion verfügbar machen, über die er die Schriftgrößen variieren kann. Mir würde es reichen, beispielsweise Standardtext zwischen 10 und 12 Punkt-Schriften zu variieren (keine Überschriften). Alternativ wäre es sinnvoll alle (!) Schriften schrittweise um je 2 Punkt heruaf- oder herabzusetzen. Wie kann ich sowas am besten realisieren?

Hallo

Das prinzipielle Vorgehen hier sieht so aus, dass du einen button definierst, der dein javascript ausführt.
Das javascript ändert/enfernt/fügt hinzu dann eine css-klasse für das ZielElement.
In den jeweiligen css-klassen sind die zugehörigen schriftgrößen hinterlegt.

Beispiel

HTML:

.
.
<a href="javascript:schriftgroesse('klein');">klein</a>
<a href="javascript:schriftgroesse('mittel');">mittel</a>
<a href="javascript:schriftgroesse('gross');">gross</a>
.
.
<p id="ziel" class="mittel">
Lorem ipsum trallala
</p>
.
.

CSS:

#ziel.klein
{
 font-size:80%;
}
#ziel.mittel
{
 font-size:100%;
}
#ziel.gross
{
 font-size:120%;
}

JS:

/* einfachste methode ohne framework und library */
function schriftgroesse(groesse)
{
 document.getElementById("ziel").className = groesse;
}

/* prototype */
function schriftgroesse(groesse)
{
 $("ziel").removeClassName("klein");
 $("ziel").removeClassName("mittel");
 $("ziel").removeClassName("gross");
 $("ziel").addClassName(groesse);
}

/* jquery */
function schriftgroesse(groesse)
{
 $("#ziel").removeClass("klein");
 $("#ziel").removeClass("mittel");
 $("#ziel").removeClass("gross");
 $("#ziel").addClass(groesse);
}

Während das einfachste Szenario auch wunderbar funktioniert, erlaubt die Hilfe von Prototype oder jQuery auch, dass das Ziel-Element von sich aus noch andere Klassen hat.
Im ersten Fall würden diese einfach überschrieben.

Ob das remove tatsächlich nötig ist, kann ich nicht genau sagen, gut möglich dass die Tools das selbst intelligent lösen. Sollten sie das nicht tun könnte ohne removeClass(-Name) ein ewig langes class-Argument entsstehen. Was aber auch nicht allzu tragisch wäre.

Für einen Absatz lässt sich das also ganz simpel lösen. Auch mit absoluten schriftgrößen.

Für eine ganze Seite bietet sich das nur an, wenn die ganze Seite auf relativen angaben aufbaut (% oder zb. em). Dann könnte mit den buttons das body-Element als Ziel angesprochen werden und so die komplette schrift auf der Seite relativ vergrößern.

Nachdenken könnte man auch über +/- buttons mit der man die schrift größe beliebig erhöhen/erniedrigen kann. Dann muss vor dem add class eben geprüft werden, welche klasse gerade gesetzt ist, und diese beispielsweise durch eine klasse "text-125" ersetzt werden.

Genausogut könnte man dann aber auch auf die klassen verzichten udn die css eigenschaften per js direkt setzen

grüße
huckepick