Element.getBoundingClientRect()返回元素的大小及相对于窗口的位置

语法:

rectObject=object.getBoundingClientRect();

返回值是一个DOMRect对象,即DOMRect={x:scrollLeft,y:scrollY,width:val1,height:val2,top:topPosition,left:leftPosition,bottom:bottomPosition,right:rightPosition}共8个属性。

兼容性:

[1] CSS spec for 'use' element 规定了用于 <use> 元素的  'symbol' 元素要设置默认的 width 和 height 为 100%。spec for width and height 'svg' attributes 也要求将 100% 作为默认值。Google Chrome 没有遵循这些规定。同时 Chrome 也不会将 stroke-width 加入计算。所以 Chrome 和 Firefox 浏览器的 getBoundingClientRect() 返回的可能是不同的。

[2] 在IE8或者更低浏览器版本中,getBoudingClientRect()方法返回的TextRectangle对象没有height和width属性。同时,额外的属性(包括height和width)也不能添加到TextRectangle对象中去。

[3] Gecko 1.9.1 将 width 和 height 属性加入到 DOMRect 对象中。

从 Gecko 12.0(Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 开始,计算元素的边界矩形会将 CSS transforms 考虑进来。

[4] IE 和 Edge 返回的是一个不包含 x, y 属性的 MSDN: ClientRect 对象

在计算边界矩形,会考虑视口区域(或其他滚动操作)内的滚动操作,当滚动位置发生改变时,四个角的属性值也会发生改变,因此他们的值是相对于视口的不是绝对的,如果你需要相对于整个网页左上角定位的属性值,只需要给四个角的属性值加上当前的滚动位置,在支持返回支持x,y属性的浏览器中,只需要用四个角的属性值减去x,y的属性值,即可获得与当前滚动位置无关的值。或者通过window.scrollX 和window.scrrollY来获取当前滚动位置。

javascript getBoundingClientRect()获取元素四个边相对于窗口或文档的位置的更多相关文章

  1. 每天一个JavaScript实例-获取元素当前高度

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 获取div相对文档的位置

    获取div相对文档的位置,两个方法 经测试 document.getElementById("btn").getBoundingClientRect() 在IE6下有2像素的bug ...

  3. 网络抓取功能实现 将获取的结果进行过滤并写入到TXT文档中

    下面是自己编写的 网络抓取功能实现 将获取的结果进行过滤并写入到TXT文档中 (以防忘记) 原创哟 import java.io.BufferedReader;import java.io.Buffe ...

  4. 四种方法 恢复损坏的Excel文档

    四种方法 恢复损坏的Excel文档 打开一个以前编辑好的Excel工作簿,却发现内容混乱,无法继续进行编辑,而且还不能够进行打印.这是很多朋友在处理Excel文件时都可能会遇到的一个问题,面对这种情况 ...

  5. javascript中获取元素尺寸

    Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小 屏幕可用工作区宽度:window.screen.availHeight,和浏览器无关,屏幕相关屏幕可用工作区高度:wind ...

  6. getBoundingClientRect获取元素在页面上的位置

    getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置. getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起 ...

  7. Javascript,获取元素,write方法

    一:Javascript:弱类型脚本语言,是一种动态类型.实现部分动画效果和用户交互等 -- html是骨架(页面结构)  css样式  js是行为 -- 弱类型体现: JS代码可以写在body,he ...

  8. javascript中获取元素节点的文本

    <div id="test"> <strong>i'm strong</strong> </div> 1.elementNode.i ...

  9. WPF,Silverlight与XAML读书笔记第四十三 - 多媒体支持之文本与文档

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. Glyphs对象(WPF,Silverlig ...

随机推荐

  1. ubuntu 下安装配置LAMP

    详情见: http://www.linuxeden.com/html/softuse/20130731/141934.html

  2. 【ubuntu】安装之后要安装的一些东西

    问题1: ubuntu默认没有安装vim,出现: root@evelyn-virtual-machine:~# vim /etc/ssh/sshd_config The program 'vim' c ...

  3. css 动画 和 响应式布局和兼容性

    14.动画 -moz-:火狐, -ms-:IE,-webkit-:谷歌,-o-:欧朋 transform旋转 rotate旋转 scale放大 translate偏移量 skew倾斜度 transfo ...

  4. MVC 模型过滤

    通用返回模型 /// <summary> /// WebApi返回数据的泛型类 /// </summary> /// <typeparam name="T&qu ...

  5. C# 压缩 解压 复制文件夹,文件的操作

    命名空间:namespace System.IO.Compression 压缩: //目标文件夹 string fileDirPath = "/Downloads/试题" + us ...

  6. 如何将运维的报警做成运营的报警--Java后端架构

    转:http://mp.weixin.qq.com/s?__biz=MzI4OTU3ODk3NQ==&mid=2247483970&idx=1&sn=2a00acfb25f0c ...

  7. #if #endif #elif #undef

    #define aaa           //放在代码最前面 int a = 1; a = a + 1; #if !aaa {a = a + 1;}#elif !aaaaa {a=a+11;}#en ...

  8. logback配置说明

    我觉得对于logback大家不太明白的有:过滤器.logger和root以及其中的一些属性的关系.其他的应该不是多迷糊,所以我就主要说说这几个的关系,并且为了清晰我只说控制台日志,写到文件的日志配置大 ...

  9. java-logic====吃货联盟

    1.系统界面 2.功能一 3.查看餐袋 4.签收订单 5.删除订单 6.我要点赞 主要分在两个类中: 第一个类entity,主要的是一些共有的属性 主要代码: public class entity ...

  10. EF Core 2.1 +数据库视图

    1.参考文档 https://stackoverflow.com/questions/36012616/working-with-sql-views-in-entity-framework-core ...