Schriftgröße auf Wunsch ändern
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufgabe
button
code
dom
erstellen
funktion
gezielt regeln
herangehen
merken
moderneren methoden
opus
parameter
regeln
schrift
schritt
schule
standard
type
unrecht beitrag
verbesserungsvorschlag
-
Hallo Leute!
Ich hätte mal eine Frage: Hab für eine Übung in der Schule die Aufgabe bekommen, dass ich 2 Buttons im Menübereich machen soll, die entweder die schriftgröße bei Klick vergrößern oder eben verkleinern sollen. Hab leider keine Ahnung wie ich an das Problem herangehen soll. Hab auch im Internet bis jetzt nichts gefunden. Ach ja, ich verwende bei dieser Übungsaufgabe iframes, keine div\'s.
Kann mir einer von euch weiterhelfen.
Thx schon jetzt -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
In einem iframe ist das nicht so einfach, hmmm.
Mit PHP wärs einfach ;)
Geht aber sichlich mit Javascript, wie genau kann ich dir aber leider nicht sagen. -
So, nach langem Herumprobieren jetzt so gelöst:
Javascript:
<script type=\'text/javascript\'>
var groesse=1;
function schrift(wie){
if(wie==\'groesser\'){
groesse*=1.5;
}
else{
groesse/=1.5;
}
document.body.style.fontSize=groesse+\"em\";
}
</script>
HTML:
<a href=\"javascript: schrift(\'groesser\')\">Schrift groesser</a><br/>
<a href=\"javascript: schrift(\'kleiner\')\">Schrift kleiner</a>
So funktioniert\'s *freu*
Danke an Philipp für die Hilfe
lG
fallen -
nich schlecht, aber eigentlich unnötig, seit dem sowas in den Browsern integriert ist!
-
@chk: das ist total unnötiger spam von dir!
Ausserdem wenn du lesen könntest würdest du merken das er das für die schule machen muss.
@fallenstar:
1. Verbesserungsvorschlag: teile diese sache in 2 funktionen auf, das ist meiner meinung nach besser
2. Versuche das nicht per / und * zu lösen sondern per + und -
Ansonsten bekommt man doch nie den gleichen wert zurück wenn man hochschaltet und dann wieder runter!
Meine lösung:
Ungetestet, man müsste die variablen multip vll anpassen.
So geht die schrift in gleichmässigen schritten grösser!
<script type=\'text/javascript\'>
var groesse=1;
var multip = 2;
function bigger()
{
groesse += multip;
document.body.style.fontSize=groesse+\"em\";
}
function smaller()
{
groesse -= multip;
document.body.style.fontSize=groesse+\"em\";
}
</script>
HTML:
<a href=\"javascript: bigger()\">Schrift groesser</a><br/>
<a href=\"javascript: smaller()\">Schrift kleiner</a>
-
Und noch etwas dynamischer (ungetestet)
function fontSize(sizeAdd, fontType) { var fontSize = document.body.style.fontSize; document.body.style.fontSize = (parseInt(fontSize.substr(0,fontSize.length-2))+sizeAdd)+fontType; }
HTML:
<a href=\"javascript: fontSize(+10,\'%\')\">Schrift groesser</a><br/>
<a href=\"javascript: fontSize(-10,\'%\')\">Schrift kleiner</a>
Somit kannst auch gleich zwischen %, EM, PX und dergleichen unterscheiden XD -
Es geht auch mit moderneren Methoden (IE kann\'s also wahrscheinlich nicht ;) )
http://developer.mozilla.org/en/docs/DOM:stylesheet
document.styleSheets[0].insertRule(\"body{font-size:80px;}\",1);
Der 2. Parameter gibt die Index-stelle an, wo die Regel im Stylesheet eingefügt werden soll. Theoretisch müsstest du so gezielt Regeln überschreiben können.
Falls nicht bedenke, dass Regeln, die weiter unten stehen, andere Regeln mit dem gleichen Selektor überschreiben.
Edit: FF, Opera und Konquerer können das! Und es ist W3C Standard. Wenn dich dein Lehrer deswegen anmacht, hat er Unrecht
Beitrag geändert: 18.12.2007 20:57:15 von bladehunter -
Wenn ich mich richtig erinnere, war die Aufgabe zwei \"Buttons\" zu erstellen, nicht Links. Das müsste aber genauso funktionieren (nicht getestet!), nur mit
- Formular erstellen
<input type=\"button\" value=\"Kleiner(/Größer)\" onclick=\"...
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage