Elementposition herausfinden.

[Cybaer]

Hi,

kann man mittels JS die Position (x und y-koordinaten) eines
HTML-Elements (z.B. eines Links) herausfinden,

Ja.

  
function getX(obj,relative) { var x=0; if(typeof(obj)=="object" && document.getElementById) { x=obj.offsetLeft; if(obj.offsetParent && !relative) { x+=getX(obj.offsetParent); } return x; } else  { return false; } }  
function getY(obj,relative) { var y=0; if(typeof(obj)=="object" && document.getElementById) { y=obj.offsetTop; if(obj.offsetParent && !relative) { y+=getY(obj.offsetParent); } return y; } else  { return false; } }  

Ermittelt absolutes X & Y des Objekts obj (wenn relativ erwünscht ist, muß der zweite Parameter true sein). Browser vor JS 1.5 liefern ein false zurück.

Bei

<span>A <span id="example">B</span></span>

wäre die Position von "A" (erstes SPAN im Quelltext):

alert("X/Y: "+getX(getObject("span",0))+"/"+getY(getObject("span",0)));

die Position von "B" (ID ist "example"):

alert("X/Y: "+getX(getObject("example"))+"/"+getY(getObject("example")));

wobei getObject() so aussieht:

  
function getObject(element,number) {  
 var obj=false;  
 if(element) {  
  if(typeof(element)=="object") { obj=element; }  
  else if(document.getElementById) {  
   number=(number)?number:0;  
   if (document.getElementById(element)) { obj=document.getElementById(element); }  
   else if (document.getElementsByName(element) && document.getElementsByName(element)[number]) { obj=document.getElementsByName(element)[number]; }  
   else if (document.getElementsByTagName && document.getElementsByTagName(element) && document.getElementsByTagName(element)[number]) { obj=document.getElementsByTagName(element)[number]; }  
  }  
 }  
 return obj;  
}  

um z.B.
nachträglich ein weiteres Element in der nähe zu platzieren?

16 "Schatten-Bs" mit fließendem Helligkeitsübergang:

  
 obj=getObject("example"); char="B";  
 if(getX(obj)!==false) {  
  for(i=1;i<=16;i++) {  
   c=i*16;  
   document.write('<span id="example'+i+'" style="color:rgb('+c+','+c+','+c+');">'+char+'<\/span>');  
   posElement("example"+i,i,i/2,-(i+1),obj)  
  }  
 }  

wobei posElement() so aussieht:

  
// Positioniere HTML-Element element absolut im Dokument  
// ausgehend vom Nullpunkt (links oben) oder vom Element base  
// posElement(Object/ID/NAME/TagName,X,Y[,Z][,Object/ID/NAME/TagName]  
function posElement(element,x,y,z,base) {  
 var obj, baseX=0, baseY=0, result=false;  
  
 if(element && document.getElementById) {  
  x=(typeof(x)=="number")?x:0;  
  y=(typeof(y)=="number")?y:0;  
  if(typeof(z)!="number" && !base) { base=z; }  
  
  if(base) {  
   obj=getObject(base);  
   if(obj) {  
    baseX=getX(obj);  
    baseY=getY(obj);  
   }  
  }  
  
  obj=getObject(element);  
  if(obj) { with(obj.style) {  
   position="absolute";  
   top=baseY+y+"px";  
   left=baseX+x+"px";  
   if(typeof(z)=="number") { zIndex=z; }  
  } result=true; }  
 }  
  
 return result;  
}  

Allerdings werden die "Schatten-Bs" falsch positioniert, wenn dies außerhalb des im Browser sichtbaren Bereichs geschieht. Und mangels echtem Bedarf, habe ich es deswegen auch erstmal so gelassen ... ;)

Gruß, Cybaer