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. java File delete()执行失败原因(转)

    java.io.File里的delete操作很实用也很常用,可以用来删除单独的文件和某一目录.但有时候会出现delete失败的情况,出现这种情况的原因一般有以下几种:1.删除时还有其他程序在使用该文件 ...

  2. JavaScript字符串去除空格

    /*字符串去除空格*/ String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g, "") ...

  3. C# 判断List集合中是否有重复的项

    /*在.Net 3.5 以上*/ ).Count() >= ;

  4. 【学习笔记】使用SQLyog连接MySQL数据库

    一.使用SQLyog创建数据库用来管理学生信息 #创建数据库student DROP DATABASE IF EXISTS Myschool; CREATE DATABASE Myschool; #在 ...

  5. Mac 10.11.4 安装mysql－5.7.13 默认密码问题

    今天下载了一个最新版的mysql dmg安装包来安装mysql,安装的整个过程竟然都没有提示输入root用户默认密码,我也没太在意,然后连接数据库时竟然提示输入密码,当时就一脸懵逼了.尝试各种密码,为 ...

  6. vue 音乐播放器报错

    使用Vue报错[Vue warn]: Error in nextTick: "TypeError: fn.bind is not a function"页面进不去. 检查:看看da ...

  7. JavaScript中文拼音排序函数

    要对很多设备根据名称排序,找了找没有找到特别适合的,然后就自己写了一个根据中文拼音首字母排序的方法. github: https://github.com/haboll/sort.git

  8. Android 使用RecyclerView优雅实现悬浮标题通讯录

    项目地址:https://github.com/hgDendi/ContactsList 界面概览: ContactsListDemo ContactsListDemo2 概要 如图,主要简单划分为两 ...

  9. SQL Server ->> CLR存储过程枚举目录文件并返回结果集

    因工作需要写了个CLR存储过程枚举目录文件并返回结果集 using System; using System.IO; using System.Collections.Generic; using S ...

  10. js事件学习的小demo

    直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...