用 Javascript 获取指定页面元素的位置

用 Javascript 获取指定页面元素的位置是一个非常常见的需求,本文介绍的方法能够准确返回一个元素相对于整个文档左上角的坐标,即元素的 top 、left 的位置,而且能够兼容浏览器,相信对新手非常有用。

用 Javascript 获取指定页面元素的位置 – 示例

 
<script language="JavaScript" type="text/javascript">
<!--
 
// 说明:用 Javascript 获取指定页面元素的位置
// 整理:http://www.codebit.cn
// 来源:YUI DOM
 
function getElementPos(elementId) {
 
	var ua = navigator.userAgent.toLowerCase();
	var isOpera = (ua.indexOf('opera') != -1);
	var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
 
	var el = document.getElementById(elementId);
 
	if(el.parentNode === null || el.style.display == 'none') 
	{
		return false;
	}
 
	var parent = null;
	var pos = [];
	var box;
 
	if(el.getBoundingClientRect)	//IE
	{
		box = el.getBoundingClientRect();
		var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
		var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
 
		return {x:box.left + scrollLeft, y:box.top + scrollTop};
	}
	else if(document.getBoxObjectFor)	// gecko
	{
		box = document.getBoxObjectFor(el);
		   
		var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
		var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
 
		pos = [box.x - borderLeft, box.y - borderTop];
	}
	else	// safari & opera
	{
		pos = [el.offsetLeft, el.offsetTop];
		parent = el.offsetParent;
		if (parent != el) {
			while (parent) {
				pos[0] += parent.offsetLeft;
				pos[1] += parent.offsetTop;
				parent = parent.offsetParent;
			}
		}
		if (ua.indexOf('opera') != -1 
			|| ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) 
		{
				pos[0] -= document.body.offsetLeft;
				pos[1] -= document.body.offsetTop;
		} 
	}
		
	if (el.parentNode) { parent = el.parentNode; }
	else { parent = null; }
  
	while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') 
	{ // account for any scrolled ancestors
		pos[0] -= parent.scrollLeft;
		pos[1] -= parent.scrollTop;
  
		if (parent.parentNode) { parent = parent.parentNode; } 
		else { parent = null; }
	}
	return {x:pos[0], y:pos[1]};
}
 
//-->
</script>

《用 Javascript 获取指定页面元素的位置》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>