Supportnet / Forum / Webseiten/HTML
(D)HTML - CSS-Schriftgröße per JavaScript ändern
Frage
Tag zusammen,
Ich bin gerade am Rumtesten. Ich hab´ vor für ein Element (div-Layer mit der ID "content") die vorgegebene Schriftgröße dynamisch über einen Button zu ändern (ohne, dass ich halt die komplette Seite neu laden muss). Funktioniert alles so weit ganz gut - im Firefox. Der IE tut nunja... gar nichts?!
Das Script sieht wie folgt aus:
[code]
<script type="text/javascript">
var fontinit = 13;
var amount = 3;
function textSize(dec) {
if(dec == 1) fontsize=fontinit+amount;
if(dec == 0) fontsize=fontinit-amount;
document.getElementById("content").style.fontSize=fontsize+"px";
}
</script>
[/code]
der HTML-Teil so:
[code]
<a href="#" onClick="textSize(1)">Schrift größer</a> | <a href="#" onClick="textSize(0)">Schrift kleiner</a>
<div id="content">
Blindtext
</div>
[/code]
Nunja, noch zur Erklärung:
Rufe ich die Funktion textSize mit dem Parameter 1 auf, wird (oder eher soll) die Schriftgröße um "amount" (welches hier mit 3 festgesetzt ist) vergrößert werden. Wenn ich die Funktion mit 0 aufrufe, soll die Schriftgröße um "amount" verringert werden.
-- Kann mir jemand sagen, wo der Fehler liegt? - Also, warum das ganze nicht auch im Internet Explorer funktioniert?
Danke für Hilfe im Vorraus,
rabies aka Sven.
Antwort 1 von rabies
Nachtrag: Schwachfug, Script-Teil aus der falschen Datei kopiert...
So sieht´s aus:
... So erhöht sich die Schriftgröße wenigstens bei jedem Klick um 3px (aber auch nur im Firefox).
So sieht´s aus:
<script type="text/javascript">
var fontinit = 13;
var amount = 3;
function textSize(dec) {
if(dec == 1) fontinit=fontinit+amount;
if(dec == 0) fontinit=fontinit-amount;
document.getElementById("content").style.fontSize=fontinit+"px";
}
</script>
... So erhöht sich die Schriftgröße wenigstens bei jedem Klick um 3px (aber auch nur im Firefox).
Antwort 2 von rfb
so funktionierts bei mir in FF, Opera und IE:
<
<style type="text/css">
#content {font-size:13px}
</style><
script type="text/javascript">
<!--
var fontsize=13;
function textSize(dec) {
fontsize+=(dec==1)?1:(-1);
if (fontsize<1) fontsize=1;
document.getElementById("content").style.fontSize=""+fontsize+"px";
}
//-->
</script><a href="javascript:textSize(1)">Schrift größer</a> | <a href="javascript:textSize(0)">Schrift kleiner</a>
<div id="content">Blindtext</div>Antwort 3 von rabies
Danke für die schnelle und hilfreiche Antwort. :)