✔ Absolute Position eines Elements

Yoah

Yoah

Erfahrenes Mitglied
Moin,

ich stehe gerade vor einem Problem, und zwar möchte ich von einem <p> Tag
die absolute Position feststellen.
Folgendes habe ich schon:
Code: 
var Array = document.getElementsByTagName("p");
for (var i = 0; i < Array.length; i++)
{
   alert(Array[i].innerText); // Text innehalb des p Tags
}

Ich habe im moment drei Tags im Dokument, alle irgendwo im Dokument verstreut,
verschachtelt, in Tabellen stehen.

Wie stelle ich es an, die absolute Position des <p> Tags im
Browser herauszufinden (Pixelangabe)?
 
Beachte dabei, dass du diese Eigenschaften nur ermitteln kannst, wenn sie direkt im Element notiert wurden oder per JS zugewiesen.

Style-Attribute aus globalen oder externen Stylesheet lassen sich nicht ermitteln.
 
das:
Code: 
Array[i].style.top
und
Code: 
Array[i].style.left
geht leider nicht!
Es sind keinerlei styles im p enthalten.
 
Geht das denn nicht ohne?
Mit DOM kann man soviel machen, ist da nicht eine Standortabfrage in px möglich?
So was in der Art:

------------------------------------------
----------------p------------------------
------------------------------------------
-----------------------p-----------------
------------------------------------------

Das erste p befindet sich an x,y, wobei die Angaben etwa so aussehen (150px,320px),
quasi 150px von oben entfernt, und 320px von der linken Seite.
Und das zweite p an x,y -> 450px, 390px.

Auf dem Bild im Anhang sind drei Kästen, mit schwarzen Rand, diese sind meine <p> Tags.
Und davon wollte ich die Position im Fenster herausfinden, quasi an welcher Stelle
im Fenster sie sich befinden.
 

Anhänge

  • prozess.jpg
    prozess.jpg
    32,3 KB · Aufrufe: 44
Zuletzt bearbeitet:
Das ist was anderes:)
Dazu brauchst du nicht unbedingt die style-Eigenschaften.

Code: 
Array[i].offsetLeft
bzw.
Code: 
Array[i].offsetTop
...könnten da weiterhelfen.
 
Das hilft, doch leider gibt das offsetLeft und offsetTop nur die pixel,
bis zum nächsten Elternelement an, und nicht absolut, bis zum Fensterrand.
Hast du nen paar Tips?
 
Jo... arbeite dich per parentNode in der Knotenstruktur so lange aufwärts, bis du beim <body>-Element angekommen bist.

Bei jedem Knoten addierst du die jeweiligen Werte zu den vorhandenen dazu....wenn du beim <body> angekommen bist, hast du die reale Position.
 
Yo, hab jetzt ne coole Art gefunden!

Um die Position relativ zum Dokument zu bekommen, muss man sich durch die offsetParent-Hierarchie durcharbeiten und alle Werte zusammen zählen.

Code: 
function absLeft(el)
{
   return (el.offsetParent)?
   el.offsetLeft+absLeft(el.offsetParent) : el.offsetLeft;
}
function absTop(el)
{
   return (el.offsetParent)?
   el.offsetTop+absTop(el.offsetParent) : el.offsetTop;
}
Danke @ all
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück