getBoundingClientRect获取元素位置 

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。

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;

javascript 温故而知新 getBoundingClientRect的更多相关文章

  1. JavaScript中getBoundingClientRect()方法详解

    获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...

  2. javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置

    来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...

  3. javascript 基础教程[温故而知新一]

    子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...

  4. 【温故而知新-Javascript】使用地理定位

    地理定位(Geolocation)API让我们可以获取用户当前地理位置的信息(或者至少是正在运行浏览器的系统的位置).它不是HTML5规范的一部分,但经常被归组到与HTML5相关的新功能中. 1. 使 ...

  5. 【温故而知新-Javascript】使用拖放

    HTML5 添加了对拖放(drag and drop)的支持.我们之前只能依靠jQuery 这样的JavaScript库才能处理这种操作.把拖放内置到浏览器的好处是它可以正确的集成到操作系统中,而且正 ...

  6. 【温故而知新-Javascript】使用canvas元素(第二部分)

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

  7. 【温故而知新-Javascript】使用canvas元素(第一部分)

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  8. 【温故而知新-Javascript】使用 Ajax(续)

    1. 准备向服务器发送数据 Ajax 最常见的一大用途是向服务器发送数据.最典型的情况是从 客户端发送表单数据,即用户在form元素所含的各个 input 元素里输入的值.下面代码展示了一张简单的表单 ...

  9. 【温故而知新-Javascript】使用 Ajax

    Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XM ...

随机推荐

  1. 【原创】Win Server 2012R2 IIS 详细配置(多图详解)

    1. 前期准备 1) 2012系统的IIS安装的时候,需要系统安装盘里面的一些软件,因此需要在安装前将系统安装盘挂载到服务器的盘符上,以便使用. 2. 添加角色和功能 打开服务器管理器,点击管理菜单, ...

  2. sersync+rsync作实时同事

    http://liubao0312.blog.51cto.com/2213529/1677586 配置搞定,参照上面的文章,用时搞一搞就OK. 注意IPTABLES的配置及环境变量 最简陋配置: rs ...

  3. mac-command-line-doing

    创建文件夹 mkdir myDirectory 新建文件 touch a.html 编辑文件 vim a.html 删除文件 rm a.html 删除整个文件夹 rm -rf myDirectory ...

  4. [BZOJ5289][HNOI2018]排列(拓扑排序+pb_ds)

    首先确定将所有a[i]向i连边之后会形成一张图,图上每条有向边i->j表示i要在j之前选. 图上的每个拓扑序都对应一种方案(如果有环显然无解),经过一系列推导可以发现贪心策略与合并的块的大小和w ...

  5. 启动MongoDB时,提示:error while loading shared libraries: libstdc++.so.6: cannot open shared object file: No such file or directory

    启动MongoDB时,提示: error while loading shared libraries: libstdc++.so.6: cannot open shared object file: ...

  6. SPCOMM控件对串口参数的设置

    对于串口来说,一般大家都了解波特率,校验码,数据位之类的参数.然而在实际的数据传输中,有些参数也会影响数据的传输.现总结如下,以便大家查询.在对串口进行编程时,可用portman对串口参数进行跟踪,提 ...

  7. linux下内存释放问题

    参考: http://blog.sina.com.cn/s/blog_3cba7ec10100gk4k.html http://blog.sina.com.cn/s/blog_3cba7ec10100 ...

  8. WEB安全漏洞与防范

    1.XSS 原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码,当用户浏览该网站时,这段HTML代码会自动执行,从而达到攻击的目的.如,盗取用户Cookie信息.破坏页面结构.重定向到其 ...

  9. docker 安装nginx并挂载配置文件和www目录以及日志目录

    ---恢复内容开始--- 一 首先 docker pull nginx 二 docker run --name myNginx -d -p 80:80 -v e:/docker/nginx/www:/ ...

  10. [转载] K3漏油器全紫铜替换原硅胶垫教程。标准姿势

    首先感谢坛友的支持,全铜套件已经完成了.有的坛友希望有个教程.在这里大体说一下技巧吧.下面步入正题. 声明:本教程图片大部分均来源于给坛友改装时所拍.如有雷同,概不负责!!!声明:本教程图片大部分均来 ...