JavaScript - Ermitteln der Position eines Seitenelements

index Anfang rückwärts vorwärts runter
Das aufgelistete Beispiel demonstriert das Ermitteln der Position von Seitenelementen. Erforderlich für die Lauffähigkeit des Scripts ist ein moderner Browser, der W3C-DOM unterstützt (Gecko (Mozilla, Netscape6+, ...), KHTML (Konqueror3+), MSIE5+).

Beispiel ansehen

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Objektreferenz Element-Objekttyp]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
index Anfang rückwärts vorwärts hoch runter 
<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                           /* HTML-Kommentar fuer Browser ohne JavaScript */

function getPosition(element)
/* der Aufruf dieser Funktion ermittelt die absoluten Koordinaten
   des Objekts element */
{
  var elem=element,tagname="",x=0,y=0;
  
/* solange elem ein Objekt ist und die Eigenschaft offsetTop enthaelt
   wird diese Schleife fuer das Element und all seine Offset-Eltern ausgefuehrt */
  while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
  {
    y+=elem.offsetTop;     /* Offset des jeweiligen Elements addieren */
    x+=elem.offsetLeft;    /* Offset des jeweiligen Elements addieren */
    tagname=elem.tagName.toUpperCase(); /* tag-Name ermitteln, Grossbuchstaben */

/* wenn beim Body-tag angekommen elem fuer Abbruch auf 0 setzen */
    if (tagname=="BODY")
      elem=0;

/* wenn elem ein Objekt ist und offsetParent enthaelt
   Offset-Elternelement ermitteln */
    if (typeof(elem)=="object")
      if (typeof(elem.offsetParent)=="object")
        elem=elem.offsetParent;
  }

/* Objekt mit x und y zurueckgeben */
  position=new Object();
  position.x=x;
  position.y=y;
  return position;
}

function alertPosition(elementId)
/* gibt eine Meldung mit x und y des zu elementId gehoerenden Elements aus */
{
  var a,element;

/* Element-Objekt zur ID ermitteln */
  element=document.getElementById(elementId);
 
/* Position bestimmen und melden */
  a=getPosition(element);
  window.alert("Position "+elementId+": ("+a.x+","+a.y+")");
}

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

  <!-- Hier ein paar Style-Angaben, damit es bunt wird: -->
<style type="text/css">
table {border:solid 1px black; margin:10px; padding:5px;}
td {background:yellow; margin:2px; padding:5px; border:solid 1px red;}
div {background:cyan; border:solid 1px black; margin:2px; padding:5px; position:relative;}
a:link {color:#202060; text-decoration:underline}
a:visited {color:#101050; text-decoration:underline}
a:hover {color:#602020; text-decoration:underline}
a:active {color:#000000; text-decoration:underline}
body {font-family:helvetica,sans-serif; background:white;}
</style>

</head>
<body>

<a href="position.html">Erkl&auml;rung</a>
  <!-- Link zurueck auf position.html -->

  <!-- Hier folgen ein paar Dokumentelemente: --> 
<table name="myTable" id="myTable">
<tr><td>-</td><td>-</td><td>-</td></tr>
<tr><td>-</td><td>-</td><td><div name="myBox" id="myBox">die Box</div></td></tr>
<tr><td name="myCell" id="myCell">die Zelle</td><td>-</td><td>-</td></tr>
</table>

<br>

  <!-- ein paar Funktions-links: -->
<a href="javascript:alertPosition('myTable')">Position der Tabelle ermitteln</a><br>
<a href="javascript:alertPosition('myBox')">Position der Box "die Box" ermitteln</a><br>
<a href="javascript:alertPosition('myCell')">Position der Tabellenzelle "die Zelle" ermitteln</a><br>

</body>
</html>
index Anfang rückwärts vorwärts hoch
Autor: Ulrich Kritzner