Ronald: Pixelbreite eines Textes dynamisch ermitteln

Hi Leute,

kann mir jedmand beantworten wie man mit JavaScript die Pixelbreite eine beliebigen Textes ermittelt.

Ich möchte für einen beliebigen Text überprüfen, ob dieser in einen mit <div>...</div> definierten Bereich paßt.

Viele Grüße
Ronald

  1. Hallo,
    so etwas funzt nur mit dem IE, der NN-Bugbrowser ist für solche Sachen nicht zu gebrauchen *g*.
    Schau mal bei http://msdn.microsoft.com/workshop/c-frame.htm?946287658218#/workshop/author/dhtml/edit/dhtmledit.asp vorbei, dort findest du alles was das IE-Herz braucht...

    Schöne Grüße
    Thomas Mell

  2. Hi Ronald.
    Ich weiss nicht wieso die Leute immer so vorschnell behaupten, mit dem Netscape würde irgendwas nicht funktionieren. Wahrscheinlich zu faul sich damit zu beschäftigen.
    Ich habs so gelöst: vor und nach dem Text kommen transparente gifs und deren position wird bestimmt. That's it !

    <html>
    <head>

    <script language="javascript1.2">
    <!--
    function getLeft(Holder)
    {
    xPos=Holder.offsetLeft
    tempEl=Holder.offsetParent
    while(tempEl != null) {xPos +=tempEl.offsetLeft;tempEl=tempEl.offsetParent}
    return xPos
    }

    function checkLeft(ref_name)
    {
    reference=document.images[ref_name]
    Pos = (document.layers) ? reference.x : getLeft(reference);
    return Pos;
    }

    function laenge()
    {
    laenge=checkLeft('endpos1')-checkLeft('startpos1');
    alert(laenge-1);
    }
    //-->
    </script>

    </head>

    <body bgcolor="gold" text="000000">

    <img src='img/nix.gif' border=0 width=1 height=1 ID='startpos1' name='startpos1'><font style="font-size:42px;">Der Text</font><img src='img/nix.gif' border=0 width=1 height=1 ID='endpos1' name='endpos1'><br>

    <br><br><br>
    <a href="javascript:laenge()">Länge ermitteln</a><br>

    </body>
    </html>

    Zwei PS: erstens werden die gifs nicht immer ganz an den Text gerückt, man muss also sich spielen oder haendisch korrigieren, damits wirklich aufs pixel genau ist. Bei obiger Lösung stimmts bei Netscape um etwa zwei pixel nicht.

    Zweitens: die Ermittlung der Position eines Bildes stammt nicht von mir, sondern von Dan Steinman, der mit The Dynamic Duo - Cross-Browser DHTML ein grossartiges Tutorium geschrieben hat: http://www.dansteinman.com/dynduo/

    Liebe Gruesse, Til.

    1. Hallö,

      Ich weiss nicht wieso die Leute immer so vorschnell behaupten, mit dem Netscape würde irgendwas nicht funktionieren. Wahrscheinlich zu faul sich damit zu beschäftigen.

      Zu faul bin ich nicht, aber nachdem einem das Teil zum 100ten mal die Lust an DHTML verdorben hat, hat man einfach keinen Bock mehr überhaupt über das Ding nachzudenken. Trotzdem ein sehr guter Lösungsvorschlag deinerseits, wenn auch "von hinten ins Knie gebohrt" und nicht unbedingt genau. Aber wer für den NN prog. der kennt das wohl *g*

      Grüße
      Thomas Mell

  3. kann mir jedmand beantworten wie man mit JavaScript die Pixelbreite eine beliebigen Textes ermittelt.

    Ich möchte für einen beliebigen Text überprüfen, ob dieser in einen mit <div>...</div> definierten Bereich paßt.

    Hallo Ronald

    vorausgesetzt der Text steht in einem absolut positionierten Div kannst du die Größe des Divs für den Navi mit document.layername.clip.right und document.layername.clip.bottom ermitteln. Im IE geht es dann mit document.all.layername.offsetWidth und document.all.layername.offsetHeight.

    Ich hoffe, daß hilft dir weiter.

    Viele Grüße

    Antje

    1. Hi Antje.
      Beim IE4 werden die Divs doch immer über die ganze Breite des Fensters ausgedehnt, Deine Methode könnte also nur für den IE5 funktionieren.
      Wie kann man erreichen, dass der Text die Breite bestimmt, damit der Div für die Textlängenmessung herhalten kann ?

      Til

      1. Beim IE4 werden die Divs doch immer über die ganze Breite des Fensters ausgedehnt, Deine Methode könnte also nur für den IE5 funktionieren.
        Wie kann man erreichen, dass der Text die Breite bestimmt, damit der Div für die Textlängenmessung herhalten kann ?

        Hallo Til,

        Einzige Alternative die mir einfällt, ist dem Div für den IE4 eine feste Breite zu geben. z.B. 200px.
        Dies könntest du dann als Berechnungsgrundlage nehmen.

        Viele Grüße

        Antje