Javascript ist Toll!

3. Februar 2006 - 11:00

Position eines Elementes ermitteln

Die Position und die Maße eines HTML Elementes, lassen sich mit folgender Funktion bestimmen:

function getRect (o){
    var r = { top:0, left:0, width:0, height:0 };
 
    if(!o) return r;
    else if(typeof o == 'string' ) o = document.getElementById(o);
 
    if( typeof o != 'object' ) return r;
 
    if(typeof o.offsetTop != 'undefined')    {
         r.height = o.offsetHeight;
         r.width = o.offsetWidth;
         r.left = r.top = 0;
         while (o && o.tagName != 'BODY')         {
              r.top  += parseInt( o.offsetTop );
              r.left += parseInt( o.offsetLeft );
              o = o.offsetParent;
         }
    }
    return r;
}

Funktionsweise

Der Funktionsparameter kann wahlweise eine bereits ermittelte Objektreferenz auf ein HTML Element sein oder ein String, der die ID eines Objektes darstellt. Der Rückgabewert ist ein Objekt mit den vier Attributen: left, top, width, height.

ähnliche Artikel

  • Kein ähnlicher Artikel
  • Comments (8)
    2102 mal gelesen.

    8 Kommentare

    Leave a comment »

    Seiten:

    1. Kommentar von: karl123
    5. März 2006: 17:31

    Hallo Struppi,

    ich habe das Script einmal ausprobiert: es funktioniert bei IE6 und Opera 8 perfekt, bei den Gecko-Browsern (Mozilla Firefox 1) aber nicht. Dort passiert garnichts.

    Hier mein Testprogramm:

    […. HTML Code gelöscht …]

    Karl

    2. Kommentar von: karl123
    5. März 2006: 18:29

    Hallo Struppi,

    sieht so aus, als wenn der Quellcode nicht dargestellt wird.
    Ich habe ihn daher auf meiner Webseite unter „Problemfälle“ dargestellt.

    Karl

    3. Kommentar von: Struppi
    6. März 2006: 8:10

    Das Skript würde funktionieren, ich erhalte aber eine Fehlermeldung:

    Fehler: xtr has no properties
    Quelldatei: ….

    Deine Abfrage nach dem Objekt scheint nicht ok zu sein.

    4. Kommentar von: fester_franz
    6. März 2006: 10:33

    Hallo Struppi,

    Vieln Dank für dieses geniale Skript, das hat mir viel Zeit gespart…

    fester_franz

    5. Kommentar von: steve
    14. August 2006: 3:04

    maozilla-browser koennen mit der uebergeben
    objekt-referenz nix anfangen. ich bin daher
    den weg der uebergabe einer element-id und resultierend die referenzierung mit hilfe
    von „objRef = getElementById(varRefID)“. mozilla >= 1 verstehts…regards steve

    6. Kommentar von: Struppi
    14. August 2006: 10:25

    Die Mozillabrowser, die ich benutze können sehr wohl etwas mit einer Objektreferenz anfangen.

    7. Kommentar von: vtiger
    9. März 2010: 13:42

    super script… vielen dank an alle helfer
    grüsse

    8. Kommentar von: lemmmi
    6. Mai 2012: 9:25

    Danke… :-)

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot
    rats-wonderful
    rats-wonderful
    rats-wonderful
    rats-wonderful