js getBoundingClientRect()获取元素四个角相对于窗口或文档的位置
Element.getBoundingClientRect()返回元素的大小及相对于窗口的位置
语法:
rectObject=object.getBoundingClientRect();
返回值是一个DOMRect对象,即DOMRect={x:scrollLeft,y:scrollY,width:val1,height:val2,top:topPosition,left:leftPosition,bottom:bottomPosition,right:rightPosition}共8个属性。
兼容性:
[1] CSS spec for 'use' element 规定了用于 <use>
元素的 'symbol' 元素要设置默认的 width 和 height 为 100%。spec for width and height 'svg' attributes 也要求将 100% 作为默认值。Google Chrome 没有遵循这些规定。同时 Chrome 也不会将 stroke-width
加入计算。所以 Chrome 和 Firefox 浏览器的 getBoundingClientRect()
返回的可能是不同的。
[2] 在IE8或者更低浏览器版本中,getBoudingClientRect()方法返回的TextRectangle对象没有height和width属性。同时,额外的属性(包括height和width)也不能添加到TextRectangle对象中去。
[3] Gecko 1.9.1 将 width
和 height 属性
加入到 DOMRect
对象中。
从 Gecko 12.0(Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 开始,计算元素的边界矩形会将 CSS transforms 考虑进来。
[4] IE 和 Edge 返回的是一个不包含 x, y 属性的 MSDN: ClientRect
对象
在计算边界矩形,会考虑视口区域(或其他滚动操作)内的滚动操作,当滚动位置发生改变时,四个角的属性值也会发生改变,因此他们的值是相对于视口的不是绝对的,如果你需要相对于整个网页左上角定位的属性值,只需要给四个角的属性值加上当前的滚动位置,在支持返回支持x,y属性的浏览器中,只需要用四个角的属性值减去x,y的属性值,即可获得与当前滚动位置无关的值。或者通过window.scrollX 和window.scrrollY来获取当前滚动位置。
- NoSQL篇 | NoSQL从小白到码神 之 Redis篇
- Neutron和ONOS集成实践
- 基于OpenDaylight和OVSDB搭建VxLAN网络
- 史上最强----机器学习经典总结---入门必读
- SDNLAB群分享(四):利用ODL下发流表创建VxLAN网络
- Neutron集成ONOS源码分析
- “访问限制”&“代理访问”实验
- OpenDaylight Lithium-SR2 Cluster集群搭建
- Linux | CentOS7下会玩JDK不?你确定?
- Linux | 不懂Linux的码神,不是真正的菜鸟
- 初体验Spring Boot 2支持的HikariCP连接池
- 快来了解JDK10中引入的全新JIT编译器:Graal
- 基于Ryu打造自定义控制器
- Junit 5新特性全集
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flask架站基础篇(七)--SQLAlchemy(1)
- JavaScript 进阶教程(1)--面向对象编程
- Flask架站基础篇(八)--SQLAlchemy(2)
- JavaWeb - EL and JSTL
- Python模拟登陆新版知乎
- 第一天:创建型模式--工厂方法模式
- 第二天:创建型模式--抽象工厂模式
- 第三天:创建型模式--建造者模式
- JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏
- python api链接数据库
- MySQL 的可重复读
- 第四天:创建型模式--原型模式
- Ubuntu16升级Python3
- JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
- 第五天:结构型模式--适配器模式