✔ Div Position zum Browserrand ermitteln

FlorianR

FlorianR

Erfahrenes Mitglied
Hallo Zusammen,

mich würde mal interessieren, wie man die Position eines Divs ermitteln kann (linke obere ecke). Dieses Div hat eine bestimmte Breite und ist immer zentriert. Wie könnte man nun also die Position der Ecke (des Divs) ermitteln (es ist ja immer unterschiedlich - je nach Bildschirmauflösung und Größe des Fensters).

Bin gespannt auf eure Antworten!

Grüße,
Florian
 
Hi,

du könntest die Offsets (offsetTop und offsetLeft) vom Ausgangselement sowie dessen offsetParents bestimmen.

Beispiel:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Quaese">
<title>www.tutorials.de</title>

<script type="text/javascript">
<!--
function getOffset(strID){
  var objStart = document.getElementById(strID);
  // Startwert
  var intOffsetLeft = objStart.offsetLeft;
  // Offset-Objekt
  var objOffset = {
    left: objStart.offsetLeft,
    top: objStart.offsetTop
  }

  // Elternelement mit Offset ermitteln
  var objHelpOffset = objStart.offsetParent;

  // Solange OffsetElemente existieren
  while(objHelpOffset){
    // Offsets addieren
    objOffset.left += objHelpOffset.offsetLeft;
    objOffset.top += objHelpOffset.offsetTop;
    // Nächstes OffsetElement
    objHelpOffset = objHelpOffset.offsetParent;
  }

  return objOffset;  // Offset-Objekt zurückgeben; Zugriff über .left und .top
}
//-->
</script>

</head>
<body>
<button onclick="alert(getOffset('offsetID').left);">offset - left</button>
<button onclick="alert(getOffset('offsetID').top);">offset - top</button>
<div style="margin: 25px; padding: 42px;">
  <div id="offsetID" style="background: #efefef;">Inhalt</div>
</div>
</body>
</html>
Die Funktion ermittelt das linke sowie das rechte Offset eines Elements, dessen ID übergeben wurde. Zurückgegeben wird ein Objekt mit den Komponenten left und top, die die Offsetwerte enthalten.

Ciao
Quaese
 
Vielen Dank! Nach "offsetLeft" etc. hatte ich schon gesucht, allerdings hat mir das "Eltern"-Element gefehlt.

Danke :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück