Sasha: Unbekannte Bildschirmkoordinaten eines Elements ausgeben

Hallo,

ich weiß, daß man mit JavaScript/CSS über style='top:100' etc. setzen kann, oder über Mausevents mit pageX(), offsetX(), screenX() etc die Cursorpostion erfahren kann, und anhand dessen auch die Position eines Divs/Layers beeinflussen kann.
Allerdings möchte ich eine unbekannte Bildschirmposition anhand eines Elements ermitteln, anhand dessen ich dann ein zweites positioniere.

Beipiel:

<html>
<head>
...
</head>
<body>
Hier kommt jede Menge dynamisch erzeugter Content.<br>
Daher weiß ich nicht wo sich dieses Div (xy) befindet:<br>
<div id='xy'>DIV XY</div>
<div id='div2'>Dieses Div soll anhand des ersten positioniert werden</div>
</body>
</html>

Jetzt müßte ich etwas schreiben können wie:
divposx = document.all['xy'].screenX; // geht nicht
divposy = document.all['xy'].screenY;

Um folgende Funktion erfolgreich aufrufen zu können:

<script type="text/javascript">
<!--
function DivPos(xwert, ywert)
{
if (document.layers) {
           document.layers[1].left = xwert;
           document.layers[1].top = ywert;
                        }
else if (window.netscape) {
      document.getElementsByTagName("div")[1].style.left = xwert + 20;
      document.getElementsByTagName("div")[1].style.top = ywert + 30;
}
}

//-->
</script>

Natürlich ist das was ich hier geschrieben habe nicht wirklich schick oder Crossbrowsertauglich, es ist nur als Beispiel gedacht, alles was ich wissen möchte ist:
Kann ich die Koordinaten (x, y) eines Elements ermitteln, wenn diese vorher nicht definiert sind?

Ich hoffe das ist halbwegs verständlich.

Danke und viele Grüße

Sasha

  1. Moin!

      
    <body>  
    Hier kommt jede Menge dynamisch erzeugter Content.<br>  
    Daher weiß ich nicht wo sich dieses Div (xy) befindet:<br>  
    <div id='xy'>  
      <div id='div2'>Dieses Div soll anhand des ersten positioniert werden</div>  
    DIV XY</div>  
    </body>  
    
    

    Zusammen mit

      
    #xy { position:relative; }  
    #div2 { position:absolute; left:20px; top:30px; }  
    
    

    Um folgende Funktion erfolgreich aufrufen zu können:
    if (document.layers) {
    else if (window.netscape) {

    Du solltest dir die diversen Möglichkeiten der Browserweiche in CSS zu Gemüte führen - sofern zutrifft, was ich vermute.

    • Sven Rautenberg
    1. Ohje, manchmal sieht man den Wald vor lauter Bäuemn nicht! Vielen Dank!
      Um mich selbst zu entschuldigen: ich schreibe seit Tagen an sehr komplizierten dynamischen Oberflächen, und irgendwann merkt man garnicht mehr, daß es auch mal einfach sein könnte.

      Entschuldigt mein überflüssiges Posting und nochmal danke für die Antwort!

    2. Hallo,

      ich möchte die Frage trotzdem nochmal aufgreifen: Im Stylesheet habe ich z.B.

      #box1 {position: absolute; top: 100px; left: 100px; width: 100px; height: 100px}

      und im HTML-Dokument

      <div id="box1">Box 1</div>

      Wie kann ich in Javascript den Wert für top ermitteln? document.getElementById("box1").style.top liefert einen leeren String.

      Und meine zweite Frage: Wie kann ich allgemein den Abstand eines Elements mit position: static zum Anfang des Dokuments ermitteln?

      Viele Grüße
      Frank