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. [BZOJ4756][Usaco2017 Jan]Promotion Counting 树状数组

    4756: [Usaco2017 Jan]Promotion Counting Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 305  Solved: ...

  2. Ubuntu角色登录答疑

    1.su 命令验证出错: $ su - rootPassword: su: Authentication failureSorry. 这时候输入 $ sudo passwd rootEnter new ...

  3. HDU 6038.Function-数学+思维 (2017 Multi-University Training Contest - Team 1 1006)

    学长讲座讲过的,代码也讲过了,然而,当时上课没来听,听代码的时候也一脸o((⊙﹏⊙))o 我的妈呀,语文不好是硬伤,看题意看了好久好久好久(死一死)... 数学+思维题,代码懂了,也能写出来,但是还是 ...

  4. Python的程序结构[2] -> 类/Class[4] -> 内建类 super

    内建类 super / Built-in Type super 关于内建类 对于 super 可以从官方文档中看到基本介绍,super 接收一个类,以及类或类的实例,最终返回一个代理对象的实例.而 M ...

  5. Gmail进程信息转储分析工具pdgmail

    Gmail进程信息转储分析工具pdgmail   进程信息转储(Process Memory Dump)是数字取证的重要方式.通过分析对应进程的信息转储,可以获取大量的信息.Kali Linux提供一 ...

  6. Orchard 事件通知小坑

    public void GetTagLogRecord(int tagId, string keyword, string area) { var tag = _repositoryTagRecord ...

  7. .net / java /安卓des加密互通

    一 . C#.net /// <summary> /// 加密数据 /// </summary> /// <param name="Text"> ...

  8. Thread.Join(int millisecondsTimeout)

    Join 就是加入的意思,也就是说新创建的线程加入到进程中,并马上执行. 看下面这段代码 Console.WriteLine("start"); Thread myTask = n ...

  9. scala测试框架:scalatest

    api文档:http://tool.oschina.net/apidocs/apidoc?api=scalatest-1.7.2 trait Assertions:http://tool.oschin ...

  10. 关于在SSH2中使用ajax技术的总结(主要写Struts2和ajax)

    以下内容是自己理解的,因为还没有看过相关的文章,所以,技术上还是有很大的欠缺.不过这也是自己努力思考得到的,如果有什么更好的建议可以回复我. 1. 任务需求: 实现一个包含数据的表格,并且有分页功能. ...