Hola otra vez :
Me sentí culpable por no haber resuelto el tema de la posición de un elemento. Sigo sin recordar por qué no funciona lo del
parentElement (creo que el poblema estaba en las tablas, porque el
TBODY repite una distancia; pero mi memoria ya no es lo que era, así que no me hagan mucho caso).
Pensando que debía haber otras opciones, una noche tuve una epifanía : en
IE5.5+ se puede escanear todo el documento a pura fuerza bruta de JScript, hasta hallar el elemento buscado y luego ubicar su punto de origen. Ésto nos daría su posición en px con respecto al panel del documento; si hacemos coincidir éste con el origen de la página, tendríamos la distancia real del elemento a las coordenadas
0,0.
Código:
<HTML><HEAD><TITLE>MUESTRA POSICIÓN DE UN ELEMENTO.</TITLE>
<SCRIPT>
var origX = 0;
var origY = 0;
var reubica = 0;
var identificador ="alfa"; // bravo , charly , delta
var anchoPantalla , altoPantalla , anchoElemento , altoElemento ;
function medidas(){
altoPantalla = document.body.scrollHeight ;
anchoPantalla = document.body.scrollWidth;
if(document.getElementById(identificador)){
altoElemento = document.getElementById(identificador).offsetHeight * 0.75;
anchoElemento = document.getElementById(identificador).offsetWidth * 0.75;
window.scroll(0,0);
document.body.style.cursor="wait";
barre1();}
}
function barre1(){
if (document.elementFromPoint(origX, origY).id == identificador ){
barre2();};
else {
if(origX < anchoPantalla){origX = origX*1+anchoElemento;
window.status= "X = "+origX+"px ; Y = "+origY+"px";
setTimeout("barre1()",2);}
else {
if(origY < altoPantalla){origY = origY*1+altoElemento ;
origX = 0;
setTimeout("barre1()",2);}
};
}
}
function barre2(){
if (document.elementFromPoint(origX, origY).id!= identificador ){
origX = origX*1+1;
barre3()};
else {
origX = origX*1-1;
window.status= "X = "+origX+"px ; Y = "+origY+"px";
setTimeout("barre2()",2);}
}
function barre3(){
if (document.elementFromPoint(origX, origY).id!== identificador ){
origY = origY*1+1;
document.body.style.cursor="";
reubica = 0;
document.getElementById(identificador).scrollIntoView();
alert("El elemento con ID \""+identificador+"\" está en las coordenadas\r\n\tX = "+(origX-2)+"px ; Y = "+(origY-2)+"px");
reubica = 1;
origX = 0;
origY = 0;}
else {
origY = origY*1-1;
window.status= "X = "+origX+"px ; Y = "+origY+"px";
setTimeout("barre3()",2);}
}
function reiniciaDesp(){
if(origX != 0 && origY != 0 && reubica != 0){
alert("No desplace el documento mientras se efectúa la medición.");
location.reload()};
}
function reiniciaRed(){
if(origX != 0 && origY != 0){
alert("No redimencione el documento mientras se efectúa la medición.");
location.reload()};
}
document.onmouseup = medidas;
window.onresize = reiniciaRed;
window.onscroll = reiniciaDesp;
</SCRIPT>
<STYLE>
#alfa{position:absolute; float:; top:590px; left:70px; height:200px; width:300px; background:bisque}
</STYLE>
</HEAD>
<BODY>
<h2>Muestra coordenadas de un elemento según su <tt>ID</tt>.</h2>
Click en el documento para conocer las coordenadas
del elmento con <TT>ID="<SCRIPT>document.write(identificador)</SCRIPT>
"</TT>.
<P>
<TABLE align=center border=1>
<TBODY><TR><TD bgColor=yellow>
<H1><TT id="bravo">ID = "bravo"</TT></H1>
</TD></TR></TBODY>
</TABLE><h1>1<p>.<p>.<p>2<p>.<p>.<p>3<p>.<p>.<p>4<p>.<p>.<p>5<p>.<p>.<p>
QWERTYUIOP QWERTYUIOP QWERTYUIOP <TT id="charly">ID="charly"</TT> QWERTYUIOP QWERTYUIOP
<SPAN id=alfa><BR> <H1><TT>ID="alfa"</TT></H1></SPAN>
<p>.<p>.<p>6<p>.<p>.<p>7<p>.<p>.<p>8<p>.<p>.<p>9<p>.<p>.<p><TT id="delta">ID = "delta"</TT>
</BODY></HTML>
Habrá que tener más o menos paciencia dependiendo de la velocidad del procesador y las distancias y tamaños en la página, pero si el elemento existe, tarde o temprano lo va a encontrar.
En la barra de estado se puede ver el progreso del barrido.
Hay en el código varios elementos con
ID para experimentar.
saludos
furoya