获取页面元素的位置

引子

最近在写一个chrome插件，用来发现页面中感兴趣的图片，这个功能首先需要能获取到特定元素的位置和区域。于是搜索到了 getBoundingClientRect 这个方法。

精密的返回值

dom元素可以调用这个方法，返回6个数值，分别是：

bottom
height
left
right
top
width
这六个值得精度都比较高。下面是一个图片的信息

1 bottom:35.80965805053711
2 height:26.818180084228516
3 left:681.2783813476562
4 right:708.0965576171875
5 top:8.991477012634277
6 26.818180084228516
top ，left，bottom，right，标志的是元素的位置，这个位置是相对于浏览器窗口的，并且考虑滚动。所以实际的坐标需要结合滚动情况一起考虑。一般就是加上 top + document.body.scrollTop 或者 left + document.body.scrollLeft。

bottom 和 right 比较少使用。bottom 是元素的底部边界到窗口的上界的间距，所以 bottom - height = top。而 right 就是右边界到窗口的左界的间距，所以 right - width = left。

例子

点击按钮，创建一个带轮廓的 div，并覆盖在图片上。

<!doctype html>
<html dir="ltr" lang="zh-CN">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <title>图片选中效果</title>
        <style>
        	img {
        		display: block;
    			margin: 10% auto;
        	}
<pre><code>    	button {
    		display: block;
    		margin: 0 auto;
    	}

.selectArea {
    		position: absolute;
    		display: none;
    		outline:#00FF00 dotted thick;
    	}

</style>
    <script type="text/javascript">
        window.onload = function(){
        	var img = document.getElementsByTagName('img')[0];
        	var rect = img.getBoundingClientRect();
        	
        	var scrollTop = document.body.scrollTop;
        	var scrollLeft = document.body.scrollLeft;

var btn = document.getElementsByTagName('button')[0];
			var selectArea = document.createElement('div');
			selectArea.setAttribute('class','selectArea');
			selectArea.style.width = rect.width + 'px';
			selectArea.style.height = rect.height + 'px';
			selectArea.style.top = rect.top + 'px';
			selectArea.style.left = rect.left + 'px';
        	document.body.appendChild(selectArea);

参考

getBoundingClientRect