Sabine: Schriftgröße ändern

Hallo,

wie realisiert man ähnlich zu

<a href="javascript:window.print()">Artikel drucken</a>

<a href="javascript:window.?">Schrift größer</a>
<a href="javascript:window.?">Schrift normal</a>
<a href="javascript:window.?">Schrift kleiner</a>,

welches die Browserfunktionalitäten von Internet Explorer u. Firefox unter Ansicht -> Schriftgrad ausnutzt ?

Gruß Sabine

  1. Hi!

    <a href="javascript:window.?">Schrift größer</a>
    <a href="javascript:window.?">Schrift normal</a>
    <a href="javascript:window.?">Schrift kleiner</a>,

    Du kannst CSS-Eigenschaften mit JavaScript über das Style-Objekt oder über das DOM ändern.

    Zu bedenken ist allerdings, daß nicht alle User JS nutzen (können).

    Außerdem bietet der Browser selbst schon die Möglichkeit zur Schriftgrößenänderung.
    Daher weiß ich nie, inwiefern der Einsatz so eines Fontsizers überhaupt sinnvoll ist.

    Schöner Gruß,
    rob

    1. Hallo,

      Du kannst CSS-Eigenschaften mit JavaScript über das Style-Objekt oder über das DOM ändern.

      Warum „oder“? Das style-Objekt gehört doch zum DOM.

      mfg. Daniel

      1. Hi!

        Warum „oder“? Das style-Objekt gehört doch zum DOM.

        Ja, stimmt. Da hast du natürlich recht.
        Eigentlich wollte ich auch was anderes schreiben.
        Da ich die Seite aus SelfHTML verlinkt habe, wollte ich mich eigentlich auf die Beispiele beziehen, wo einmal die Syntax für den alten IE über document.all und dann die moderne Syntax über das DOM beschrieben wird:

        document.all.DynText.style.backgroundColor = "yellow";  
        document.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933";
        

        Hatte was geschrieben und den Text dann noch mal geändert.
        Hätte ich dann besser noch mal lesen sollen...

        Schöner Gruß,
        rob

        1. Hallo,

          Da ich die Seite aus SelfHTML verlinkt habe, wollte ich mich eigentlich auf die Beispiele beziehen, wo einmal die Syntax für den alten IE über document.all und dann die moderne Syntax über das DOM beschrieben wird:

          Obwohl es eigentlich keine Rolle spielt, *wie* man an das Objekt kommt. Letztlich sind die Eigenschaften ja in den HTML-Objekten gespeichert.

          document.all.DynText.style.backgroundColor = "yellow";

          document.getElementsByTagName("p")[i].style.backgroundColor = "#FF9933";

            
          Wobei das Ergebnis bei diesen Beispielen unterschiedlich ausfällt. Das Äqualent zum document.all-Beispiel wäre eher:  
            
          `document.getElementById("DynText").style.backgroundColor = "#FF9933";`{:.language-javascript}  
            
          mfg. Daniel
          
          -- 
          [Experten raten von der Verwendung des Internet Explorers ab!](http://web.oesterchat.com/internet-explorer/)  
          [Mein SELF-stylesheet](http://danielrichter.da.funpic.de/SELFForumsCSS.html) | [Darum Firefox!](http://www.firefox-love.de/)  
          [Selfcode](http://forum.de.selfhtml.org/cgi-bin/selfcode.pl): [ie:{ fl:( br:> va:) ls:& fo:) rl:( n4:# ss:) de:> js:) mo:} zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%7B+fl%3A%28+br%3A%3E+va%3A%29+ls%3A%26+fo%3A%29+rl%3A%28+n4%3A%23+ss%3A%29+de%3A%3E+js%3A%29+mo%3A%7D+zu%3A%7D)
          
  2. Hallo,

    <a href="javascript:window.?">Schrift größer</a>
    <a href="javascript:window.?">Schrift normal</a>
    <a href="javascript:window.?">Schrift kleiner</a>,

    welches die Browserfunktionalitäten von Internet Explorer u. Firefox unter Ansicht -> Schriftgrad ausnutzt ?

    Das geht nicht. Auf diese Browsereinstellungen hat man mit JavaScript leider keinen Zugriff.

    Du kannst lediglich die Schriftgröße einzelner Elemente im Dokument ändern (halt über .style.fontSize) oder zentrale CSS-Regeln setzen bzw. anpassen (Stichwort document.styleSheets).

    Alternativ kannst du im CSS gewisse Klassen vorgeben, sodass du einfach nur className von body ändern musst, damit andere CSS-Regeln wirksam werden. Die Regeln sehen dann z.B. so aus: body.zoom120 #haupttext { font-size:18px; } usw.

    Eine weitere Lösung ist die Nutzung von em- bzw. %-Werten im ganzen Dokument (Voraussetzung ist ein relativ skalierbares Layout). Beim body-Element kannst du dann den Skalierungsfaktor setzen und schon verändern sich alle (zumindest Schrift-)Größen im Dokument. Das habe ich so bei http://molily.de/sterne/ gelöst (Script).

    Mathias