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. js 获取时间相关

    $(document).ready(function () {            var date = new Date();            var sb = "";  ...

  2. 转载：.NET Memory Leak: XmlSerializing your way to a Memory Leak

    原文地址:http://blogs.msdn.com/b/tess/archive/2006/02/15/532804.aspx I hate to give away the resolution ...

  3. Cocos2d-x手游技术分享（1）-【天天打蚊子】数据存储与音效篇

    前言: 手游项目<天天打蚊子>终于上线,特地写几篇技术分享文章,分享一下其中使用到的技术,其中使用cocos2d-x引擎,首选平台iOS,也请有iPhone或者iPad的朋友帮忙下载好评. ...

  4. Oracle中scott用户下基本表练习SQL语句

    --选择部门中30的雇员SELECT * from emp where DEPTNO=30;--列出所有办事员的姓名.部门.编号--采用内连接方式,也就是等值链接,也是最常用的链接SELECT ena ...

  5. python私有成员

    在一个模块中,我们可能会定义很多函数和变量,但有的函数和变量我们希望给别人使用,有的函数和变量我们希望仅仅在模块内部使用.在Python中,是通过_前缀来实现的. 正常的函数和变量名是公开的(publ ...

  6. CSS Hack兼容

    CSS中有很多标签在不同浏览器中有不同的兼容性问题,问了让网页的功能更好的不同浏览器中显示正常, 需要通过hack的方式来解决浏览器兼容问题. CSS hack问题由来已久,目前我的了解甚少,以下是转 ...

  7. Python爬虫之requests模块(2)

    一.今日内容 session处理cookie proxies参数设置请求代理ip 基于线程池的数据爬取 二.回顾 xpath的解析流程 bs4的解析流程 常用xpath表达式 常用bs4解析方法 三. ...

  8. javascript 权威指南

    1.对象 1.1.序列话对象 JSON.stringify() 和 JSON.parse() 用来序列化和还原 javascript 对象. var o = {x:1, y:{z:[false,nul ...

  9. 让zepto支持ie

    找到zepto源码:修改为如下代码: zepto.Z = function(dom, selector) { dom = dom || [] // 支持ie10,主要是支持wp8 if(window. ...

  10. 关于scheduleAtFixedRate方法与scheduleWithFixedDelay的使用

    一.scheduleAtFixedRate方法 该方法是ScheduledExecutorService中的方法,用来实现周期性执行给定的任务,public ScheduledFuture<?& ...