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. 浏览器后退->清除原页面div中填写的数据

    需求说明:页面表单用前端用div布局,提交之后跳转到另一个页面,但是考虑到客户奇怪的脑回路,可能会点击浏览器的后退按钮,不知道是个体情况还是都是一样,原本div中填写的数据还依然存在,所以需要让页面在 ...

  2. js把数据处理成钱的格式

    1.var Rmoney = parseFloat(money).toFixed(2);//把money处理成保存2位小数的格式

  3. Spring课程 Spring入门篇 4-9 Spring bean装配之对jsr支持的说明

    1 解析 1.1 疑问:2.2去掉@resource注解,为什么不能赋值?不是有set方法了吗? 1.2 @resource注解版本支持 1.3 没有显式指定@resource的那么,默认名称从何获得 ...

  4. Linux ARP代理 与 NAT

    有时候我们会在一个已有网络(10.10.10.0/24)内组建一个实验网络(192.168.1.0/24),网络结构如上图所示. 假设我们不能控制(修改)A网络内除D主机以外的系统配置,但可以完全控制 ...

  5. oracle学习篇八：约束

    ----约束------- --1.主键约束--唯一标识,不能为空,通常用于ID--1>创建主键create table person(id varchar2(20) primary key,n ...

  6. CRM——讲师与学生

    一.课程记录和学习记录 1.初始化 course_record, study_record.2.学习记录3.录入成绩4.显示成绩 ajax 查询 柱状图展示成绩 highcharts 5.上传作业(o ...

  7. windows环境下wampserver配置https

    因为公司业务主要是在微信上进行开展的,所以作为程序员的我们每天的开发任务就都是在与微信打交道,这个时候我们就需要在本地配置端口映射到外网,方便我们在微信客户端进行调试. 最近某种需要,所以需要配置 h ...

  8. XUtils3 的 环境搭建与简单使用

    XUtils3 的 环境搭建 环境搭建三部曲 ----------------------- 说明 : author  修雨轩陈 使用andorid Studio 已经创建了一个项目 并且自己需要使用 ...

  9. android drag

    1.Android:Drag and Drop的应用 2.Android 用户界面---拖放(Drag and Drop)(三) 3.Android 用户界面---拖放(Drag and Drop)( ...

  10. 管理uWSGI服务器

    管理uWSGI服务器 官网参考 如果您正在管理多个应用程序或高容量站点,请查看 uwsgi皇帝-多应用程序部署 虫族模式 UWSGI订阅式服务器 启动uwsgi服务器 以系统管理员身份启动 uwsgi ...