javascript计算某个元素在页面上的偏移量

2017-10-150

元素的可见大小由其宽度、高度决定，包括所有内边距、滚动条和边框大小(注意，不包括外边距)。通过下列4个属性可以取得元素的偏移量。

offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。
offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

其中，offsetLeft与offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。例如，<td>元素的offsetParent是作为其祖先元素的<table>元素，因为<table>是在DOM层次中距<td>最近的一个具有大小的元素。要想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。以下两个函数就可以用于分别取得元素的左和上偏移量。

function getElementLeft(element){
	var actualLeft=element.offsetLeft;
	var current=element.offsetParent;
	while(current!==null){
		actualLeft+=current.offsetLeft;
		current=current.offsetParent;
	}
	return actualLeft;
}
function getElementTop(element){
	var actualTop=element.offsetTop;
	var current=element.offsetParent;
	while(current!==null){
		actualTop+=current.offsetTop;
		current=current.offsetParent;
	}
	return actualTop;
}

这两个函数利用offsetParent属性在DOM层次中逐级向上回溯，将每个层次中的偏移量属性合计到一块。对于简单的CSS布局的页面，这两函数可以得到非常精确的结果。对于使用表格和内嵌框架布局的页面，由于不同浏览器实现这些元素的方式不同，因此得到的值就不太精确了。一般来说，页面中的所有元素都会被包含在几个<div>元素中，而这些<div>元素的offsetParent又是<body>元素，所以getElementLeft()与getElementTop()会返回与offsetLeft和offsetTop相同的值。所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性，如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。

单击显示该元素的偏移量

你也许感兴趣的

上一篇：javascript innerHTML属性下一篇：javascript clientWidth clientHeight获取元素的客户区大小