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. springboot和mybatis集成，自动生成model、mapper，增加mybatis分页功能

    整体思路和http://www.cnblogs.com/mahuan2/p/5859921.html相同. 主要讲maven的pom.xml和一些配置变化,详细说明. 软件简介 Spring是一个流行 ...

  2. tornado基本使用【服务】

    1.安装 2.请求处理程序和请求参数 1.安装 pip install tornado 2.请求处理程序和请求参数 Tornado 的 Web 程序会将 URL 或者 URL 范式映射到 tornad ...

  3. mysql 查两个表相同的值

    比如一个数据库 表A和表B 都有一个username字段, 现查出与表A中username值相同的表B的username和password数据 select B.username,B.password ...

  4. common-jdbc:一个基于SpringJdbcTemplate的高性能数据库操作工具类库

    项目地址:https://gitee.com/cnsugar/common-jdbc 一.简介 基于SpringJdbcTemplate的高性能数据库操作工具类库,支持mysql.oracle数据库, ...

  5. String常用操作

    常量池: 字符串一旦被初始化就不会被改变 String s="123"; s="abc"; System.out.print(s); 这段代码看上去s的值是被改 ...

  6. scss-声明变量与引用

    一.变量的声明 使用$符号可以标识一个变量 $bg-color: #FFFFFF; 二.变量的引用: 变量的引用有一个原则,那就是标准css属性值存在的地方,变量就可以存在. 当编译成css文件的时候 ...

  7. 使用 iframe + postMessage 实现跨域通信

    在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面,这时第一反应是使用 iframe,但是产品又提出在 a.com 中操作,b.com 中进行显示,或者相反. 1.postMess ...

  8. 为mongodb添加账号

    进入切换到某一个数据库,我这里是位每个模块分配一个DataBase use 0 执行添加账号命令 db.createUser( { user: "*****", pwd: &quo ...

  9. JSP数据库综合练习

    一.问题概述         实现了数据库的增删改查和分页显示.         分页显示:mysql String cmd = "select * from t_user limit &q ...

  10. Ubuntu 查找文件夹中内容包含关键字的文件,路径为当前文件夹

    From CSDN http://blog.csdn.net/lizhenmingdirk/article/details/44834997 grep -rl "keyword" ...