KaisarCode {{

scripting 4 freeDOM


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

getPosition.js


Enjoy and share!