js 获得盒子距离窗口的距离的集合的函数dom.getboundingclientrect()
2017-06-13 14:17
651 查看
rectObject = object.getBoundingClientRect();
返回值是一个 DOMRect 对象,这个对象是由该元素的
getClientRects()方法返回的一组矩形的集合,
即:是与该元素相关的CSS 边框集合 。
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
getBoundingClientRect()最先是IE的私有属性,现在已经是一个W3C标准。所以你不用当心浏览器兼容问题,不过还是有区别的:IE只返回top,lef,right,bottom四个值,不够可以通过以下方法来获取width,height的值:
var ro = object.getBoundingClientRect();
var Width = ro.right - ro.left;
var Height = ro.bottom - ro.top;
//兼容所有浏览器写法:
var ro = object.getBoundingClientRect();
var Top = ro.top;
var Bottom = ro.bottom;
var Left = ro.left;
var Right = ro.right;
var Width = ro.width||Right - Left;
var Height = ro.height||Bottom - Top;
//有了这个方法,获取页面元素的位置就简单多了:
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
getClientRects 和 getBoundingClientRect 的区别
返回类型差异:getClientRects 返回一个TextRectangle集合,就是TextRectangleList对象。
getBoundingClientRect 返回 一个TextRectangle对象,即使DOM里没有文本也能返回TextRectangle对象.
浏览器差异:
除了safari,firefox2.0外所有浏览器都支持getClientRects和getBoundingClientRect,
firefox 3.1给TextRectangle增加了 width 和 height。
ie 和非ie浏览器在使用getClientRects还是有些差别的,ie获取TextRectangleList的范围很大。而非ie获取的范围比较小, 只有display:inline的对象才能获取到TextRectangleList,例如em i span 等标签。
通过测试,至少Chrome 2+\Safari 4\Firefox3.5\0pera 9.63+已经支持getBoundingClientRect方法。
相关文章推荐
- 准确获得页面、窗口高度及宽度的JS
- 准确获得页面、窗口高度及宽度的JS
- JS函数集合大全
- 在ASP.NET中一个弹出信息窗口及获得焦点的函数
- 解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
- 准确获得页面、窗口高度及宽度的JS
- 简单常用JS函数集合大全107个
- 一个获得窗口图象的函数
- IE浏览器下DOM节点被替换后获取边界offsetParent / getBoundingClientRect 的BUG解决(版本 EXT 2.0/ 2.0.1)
- 解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
- JS函数集合大全
- JS函数集合大全(转载)
- JS函数集合大全
- js判断输入是否中文,数字,身份证等等js函数集合第1/3页
- JS函数集合大全
- 准确获得页面、窗口高度及宽度的JS
- javascript中iframe里面的页面调用父窗口js函数的方法。
- JS 函数集合
- JS函数集合大全(转载)
- JS函数集合大全