• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Textgröße verändern

T

Tatse

Neues Mitglied
Hallo,
wenn ich im unten aufgeführten Beispiel zum ersten Male den Button "Schrift++" anklicke, wird der Text verkleinert statt vergrößert. Bei weiterem Anklicken wird er richtigerweise vergrößert.
Woran liegt dies?
Code: 
<html>
<head>
<script>
function fontSize(was,px,wen) {
    aktuell = document.getElementById(wen).style.fontSize;
    neu = aktuell.replace(/px/gi,"");
    neu *= 1;
    if (was=="big") {
        neu += px;
    }
    else if (was=="small") {
        neu -= px;
    }
    document.getElementById(wen).style.fontSize = neu + "px";
}
</script>
</head>
<body>
<div id="Schrifttest">
<h1>&Uuml;berschrift 1</h1>
<h3>
&Uuml;berschrift3</h3>
<p>Text</p>
</div>
<button onclick="fontSize('big',5,'Schrifttest');">
    Schrift ++
</button>
<button onclick="fontSize('small',5,'Schrifttest');">
    Schrift --
</button>
</body>
 
Zuletzt bearbeitet:
Vermutlich weil das Element eigentlich keinerlei Schriftgröße hat die Du per CSS vorgibst sondern den Browserstandard nimmt. Solange Du den Wert nicht explizit inline setzt, kommt bei obj.style.fontSize nichts raus, weshalb beim Berechnen vom falschen Wert (nämlich keinem) ausgegangen wird.
 
threadi schrieb:
Vermutlich weil das Element eigentlich keinerlei Schriftgröße hat die Du per CSS vorgibst sondern den Browserstandard nimmt. Solange Du den Wert nicht explizit inline setzt, kommt bei obj.style.fontSize nichts raus, weshalb beim Berechnen vom falschen Wert (nämlich keinem) ausgegangen wird.
Zum Vergrößern anklicken....

window.getComputedStyle würde den richtigen Wert liefern.
 
threadi schrieb:
Vermutlich weil das Element eigentlich keinerlei Schriftgröße hat die Du per CSS vorgibst sondern den Browserstandard nimmt. Solange Du den Wert nicht explizit inline setzt, kommt bei obj.style.fontSize nichts raus, weshalb beim Berechnen vom falschen Wert (nämlich keinem) ausgegangen wird.
Zum Vergrößern anklicken....
Wenn ich nach der head-Angabe einfüge
Code: 
<style>
  #Schrifttest {font-size:18px;}
</style>
dann funktioniert es weiterhin nicht.
Erst wenn ich die Styleangabe in dem div angebe (<div id="Schrifttest" style="font-size:18px;">)
funktioniert es richtig.
War die style-Angabe nicht korrekt? Oder warum funktioniert es damit nicht?

scbawik schrieb:
window.getComputedStyle würde den richtigen Wert liefern.
Zum Vergrößern anklicken....
Dieser Befehl liefert alle möglichen CSS-Eigenschaften. Muss dieser vor meinem Script ausgeführt werden. Muss dann noch eine Variable besetzt werden.
(Sorry, aber Javascript ist für mich noch ein weißes Blatt)
 
Zuletzt bearbeitet von einem Moderator:
Tatse schrieb:
Dieser Befehl liefert alle möglichen CSS-Eigenschaften. Muss dieser vor meinem Script ausgeführt werden. Muss dann noch eine Variable besetzt werden.
(Sorry, aber Javascript ist für mich noch ein weißes Blatt)
Zum Vergrößern anklicken....

Hier mal als Ansatz:
HTML: 
<p class="zoomable">Hi</p>
<p>Hi</p>
<p class="zoomable">Hi</p>
<p>Hi</p>
<a href="javascript:zoomIn()">Zoom In</a>

Code: 
function zoomIn () {

  var elems = document.getElementsByClassName('zoomable');

  for(var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    var fontSize = parseInt(window.getComputedStyle(elem, null).getPropertyValue('font-size'));
    elem.style.fontSize = (fontSize+1)+'px';
  }
 
}

Allerdings wäre es besser man macht das ganze mit CSS-Klassen, statt wie hier, mit Inline-Styles. Das wirst du aber früher oder später alles selbst lernen.
 
Hallo scbawik,
das Beispiel funktioniert bei mir leider nicht.
das script wird bei Klick auf den Link nicht aufgerufen. Ich habe ganz am Anfang des Scripts ein allert("Hallo") eingebaut, was nichts bewirkt.
Javascript ist bei mir aktiviert.

Natürlich musste es heißen "alert"
 
Zuletzt bearbeitet:
Wenn ich obiges Beispiel in jsfiddle ausführe, funktioniert es bei mir auch,
mit dem kompletten HTML
Code: 
<html>
<head>
<script>
function zoomIn () {
  var elems = document.getElementsByClassName('zoomable');
 alert (elems);
  for(var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    var fontSize = parseInt(window.getComputedStyle(elem, null).getPropertyValue('font-size'));
    elem.style.fontSize = (fontSize+1)+'px';
  }
}
</script>
</head>
<body>
<p class="zoomable">Hi</p>
<p>Hi</p>
<p class="zoomable">Hi</p>
<p>Hi</p>
<a href="javascript:zoomIn()">Zoom In</a>
</body>
</html>

aber kommt folgende Meldung
Meldung.jpg
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben