Get Position [JavaScript]
"Cómo obtener la posición absoluta (top y left) en el navegador de un elemento sin utilizar JQuery."
/*KaisarCode.com get Position*******************************
* @title: get position
* @description: Crossbrowser element Position on screen . Returns the
position (left,top) on screen of any HTML element.
* @params: elem [Object] - the HTML element object
axis [string] - return just the "left" or "top" position,
* @return: elempos[Array] - x,y of the element
* @example: document.onclick=function(){
return kc.getPosition(document);
}
*/
getPosition=function(elem,axis){
var elempos=new Array();
try{
/*Collecting Full Position*/
elempos[0]=elem.offsetLeft;
elempos[1]=elem.offsetTop;
if(elem.offsetParent){
do{
elempos[0]+=elem.offsetLeft;
elempos[1]+=elem.offsetTop;
}while(elem=elem.offsetParent);
}
/*Catching a possible zero mismatch*/
if(typeof(elempos[0])=="undefined"){elempos[0]=0;}
if(typeof(elempos[1])=="undefined"){elempos[1]=0;}
}catch(err){
elempos[0]=0;
elempos[1]=0;
}
if(typeof(axis)=="undefined"){
return elempos;
}else{
if(axis=="left" || axis===0){
return elempos[0];
}else if(axis=="top" || axis===1){
return elempos[1];
}
}
}
Implementación
Llamá al script de más arriba dentro del <head> del documento HTML, o incluí el .js que se encuentra para descargar más abajo.
Cada vez que se necesite obtener la posición del cursor o puntero dentro de una página web, simplemente hay que ejecutar la función getPosition(elem);, donde elem es el objeto HTML del cual queremos obtener su posición.
var html_elem=document.getElementById("some_id");
alert(getPosition(elem));
Cómo funciona?
La función utiliza las propiedades offsetLeft y offsetTop del elemento, y recursivamente de los elementos padres hasta llegar al elemento raíz, las combina y devuelve como un Array de dos posiciones (left y top respectivamente). A su vez, se asegura de que el resultado sea siempre numérico.
Descarga
Enjoy and share!
- older entries›
