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. bzoj 3243: [Noi2013]向量内积

    Description 两个d 维向量A=[a1,a2,...,ad]与B=[b1,b2,...,bd]的内积为其相对应维度的权值的乘积和,即: 现有 n 个d 维向量x1,...,xn ,小喵喵想知 ...

  2. 深入理解JavaScript系列（13）：This? Yes,this!

    介绍 在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节.讨论的主题就是this关键字.实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题. 许多程序员习惯的认为,在程序语言中 ...

  3. Windows无法启动MySQL服务，错误1067

    问题:mysql服务启动异常 找出原因 检查D:\mysql-5.6.20-winx64\data目录下client-02.err文件的错误信息(以err为后缀名的文件是mysql的日志文件) 修改配 ...

  4. 03.if 和 switch结合练习

    namespace _04.练习01 { class Program { static void Main(string[] args) { //请用户输入年份,再输入月份,输出该月有多少天 Cons ...

  5. CentOS7卸载OpenJDK，并安装Oracle官方JDK

    一.准备工具 yum源挂载已就绪:CentOS7本地yum源挂载. jdk-8u201-linux-x64.tar.gz,JDK安装包: 注意:在Linux配置JDK版本要求_jdk1.8+; 二.卸 ...

  6. Fragment中的方法findFragmentById(int id)的返回值探讨

    在学习<Android编程权威指南>P124页的时候,遇到了这样的代码: 引起了我的疑问if的判断条件是(fragment==null),那执行完上一句 Fragment Fragment ...

  7. vue——组件

    一.组件概念 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. // 定义一个名为 button-coun ...

  8. ERP设计之系统基础管理(BS)-日志模块设计(转载)

    原文地址:8.ERP设计之系统基础管理(BS)-日志模块设计作者:ShareERP 日志模块基本要素包括: 用户会话.登录.注销.模块加载/卸载.数据操作(增/删/改/审/弃/关等等).数据恢复.日志 ...

  9. SELECT * FROM pet WHERE name REGEXP 'w';

    To find names containing a “w”, use this query: SELECT * FROM pet WHERE name REGEXP 'w';

  10. java生成实体类的工具内部是如何实现的（mysql）

    一.认识INFORMATION_SCHEMA数据库 INFORMATION_SCHEMA数据库提供了访问数据库元数据(数据的数据)的方式 该数据库中存放有数据库名.表名,列名.列的数据类型等各种数据 ...