Element.getBoundingClientRect()方法会返回元素的大小和相对于视口的位置

语法：

var domRect = element.getBoundingClientRect()

值：

返回值是一个 DOMRect 对象。其中 width、height、left 和css 里面是一样的。

　　width：就是元素自身宽度

　　height： 元素自身高度

　　left：元素开始位置到窗口左边的距离

　　right： 元素的右边到窗口左边的距离

　　bottom： 元素的下边到窗口上边的距离

　　top： 元素的上边到窗口上边的距离

　　x 和 y 相当于 left 和 top

Element.getBoundingClientRect()的更多相关文章

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

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

  2. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...

  3. JavaScript中getBoundingClientRect()方法详解

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

  4. getBoundingClientRect在IE9/10里的bug

    getBoundingClientRect可以获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,最早在IE中实现,后其它浏览器均已实现. 但它在IE9,10中有个bug,当出现垂直滚动条时, ...

  5. Safari on iOS 7 中Element.getClientRects的Bug

    在Safari浏览器中,DOMElement和Range对象都提供了getBoundingClientRect方法和getClientRects方法.顾名思义,getBoundingClientRec ...

  6. getBoundingClientRect()兼容性处理

    getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

  7. getBoundingClientRect的用法

    getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 1.语法:这个方法没有参数. rectObject = ...

  8. getBoundingClientRect方法获取元素在页面中的相对位置

    获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBou ...

  9. (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点

    Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...

随机推荐

  1. [转]v$parameter, v$parameter2, v$system_parameter, v$system_parameter2, v$spparameter区别

    本文转自:http://blog.csdn.net/huang_xw/article/details/617389 1 v$parameter v$parameter显示的是session级的参数. ...

  2. [转]EntityFramework中常用的数据修改方式

    本文转自:http://blog.csdn.net/itmaxin/article/details/47662151 上一篇文章里提到了 EntityFramework中常用的数据删除方式,那么修改对 ...

  3. 远程SQL Server连接不上

    运行 cmd -> 输入 netsh winsock reset重启后 应该可以连接sql了

  4. attribute和property的区别

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...

  5. sass函数：@function

    sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始. sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以ligh ...

  6. File I/O 小结

    1 .I/0: input/output 2.java.io.File 3 .表示:文件或者文件夹(目录) 4. File f = new File("文件路径"); 5 .注意: ...

  7. OAuth2.0 入门与进阶

     一.基础知识 1.OAuth产生背景 很多网站.APP 弱化甚至没有搭建自己的账号体系,而是直接使用社会化登录的方式,这样不仅免去了用户注册账号的麻烦.还可以获取用户的好友关系来增强自身的社交功能. ...

  8. arcgis server 10.1 发布动态图层展示海量及频繁更新的数据步骤

    Arcgis server  发布动态图层及调用动态图层 做这个动态图层功能的原由是 有一个30万的数据需要通过arcgis GP工具转成shp然后渲染加载进地图,原来的做法是遍历生成shp面要素,读 ...

  9. SharePoint 2013 - Breadcrumb

    By default SharePoint 2013 doesn’t have a breadcrumb (like the 2010 version used to have). This was ...

  10. 重复启动某一款应用,并传递intent参数

    Intent intent = getPackageManager().getLaunchIntentForPackage(packageName); intent.setFlags(Intent.F ...