获取页面元素的位置

zoukankan html css js c++ java

获取页面元素的位置
引子

最近在写一个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); var selected = false; (btn.addEventListener || btn.attachEvent)('click', function(e){ var event = e || window.event; if(event.target !== btn){ return; } if(selected){ selectArea.style.display = 'none'; selected = false; }else{ selectArea.style.display = 'block'; selected = true; } },true) } </script> </head> <body> <img src="http://d.hiphotos.baidu.com/baike/s%3D220/sign=4dd0ab623a6d55fbc1c671245d234f40/11385343fbf2b211f85442f2cd8065380cd78e10.jpg" alt="江疏影"/> <button>选中</button> </body> </code></pre> </html>

参考
- getBoundingClientRect
查看全文

相关阅读:
下一个ajax异步请求被挂起问题
 借鉴别人的Oracle 11g安装和卸载图文教程
 Html5 实现网页截屏页面生成图片(图文)
Oracle修改字段类型方法小技巧
 基于轻量级ORM框架Dapper的扩展说明
 JavaScript+html5 canvas实现本地截图教程
 SkipList跳表基本原理
 Oracle日期查询：季度、月份、星期等时间信息
 设计模式之模板模式
 设计模式之解释器模式

原文地址：https://www.cnblogs.com/Rexxar/p/5566852.html

获取页面元素的位置

引子

精密的返回值

例子

参考