Javascript ist Toll!

3. February 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)
    1310 mal gelesen.

    8 Kommentare

    Leave a comment »

    Seiten:

    1. Comment von: karl123
    5. March 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. Comment von: karl123
    5. March 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. Comment von: Struppi
    6. March 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. Comment von: fester_franz
    6. March 2006: 10:33

    Hallo Struppi,

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

    fester_franz

    5. Comment 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. Comment von: Struppi
    14. August 2006: 10:25

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

    7. Comment von: vtiger
    9. March 2010: 13:42

    super script… vielen dank an alle helfer
    grüsse

    8. Comment von: lemmmi
    6. May 2012: 9:25

    Danke… :-)

    Leave a comment

    Name (required)
    Mail (wird nicht angezeigt) (required)
    Website

    Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



    Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
    rats-wonderful
    rats-wonderful
    rats-wonderful
    rats-wonderful