getBoundingClientRect的快速理解
getBoundingClinetRect: 获取某一个元素相对视窗的位置集合(它是一个方法,返回一个对象集合)
位置集合主要包括 { top, left, right,bottom } 等属性
用法: Obeject.getBoundingClinetRect() (这里的Obeject代表的想要获取该元素的位置集合的DOM元素)
eg: var pos = Obeject.getBoundingClinetRect()
var left = pos.left // 获取该元素左边相对屏幕左边的位置
var right = pos.right// 获取该元素右边相对屏幕左边的位置
var bottom = pos.bottom// 获取该元素下边相对上边屏幕的位置
var top= pos.top// 获取该元素上边相对屏幕上边的位置
兼容性问题: 在低版本IE浏览器中会多出2px
兼容性写法:
eg: var pos = Obeject.getBoundingClinetRect()
var htmlLeft = document.documentElement.clientLeft
var htmlTop = document.documentElement.clientTop
var left = pos.left - htmlLeft // 获取该元素左边相对屏幕左边的位置
var right = pos.right - htmlLeft // 获取该元素右边相对屏幕左边的位置
var bottom = pos.bottom - htmlTop // 获取该元素下边相对屏幕上边的位置
var top= pos.top - htmlTop // 获取该元素上边相对屏幕上边的位置
因为现代浏览器中document.documentElement.clientTop 和 document.documentElement.clientLeft 都为0,
在低版本浏览器中 document.documentElement.clientTop 和 document.documentElement.clientLeft 都为2px
所以很好的解决了兼容性问题
转载于:https://www.cnblogs.com/Glen1021/p/6891560.html
- 超快速理解const修饰的作用
- 快速理解VirtualBox的四种网络连接方式
- SAP SD后台配置入门篇:帮你快速理解SAP SD后台配置
- 快速理解VirtualBox的四种网络连接方式
- RequireJs的使用和快速理解
- 理解快速生成树协议(802.1w)
- 快速理解prototype属性
- 1063 sicily (木有准确理解题意,一直wrong error)——不过这事快速排序的一次复习,还是记录一下
- 快速理解闭包的用途
- 教你30分钟内快速理解面向对象思想
- 5分钟快速理解vuex vuex教程
- 快速理解乐观锁和悲观锁
- 学一点 MySQL 双机异地热备份----快速理解mysql主从,主主备份原理及实[ 转]
- 快速理解HTTP协议
- 快速理解 Java ClassLoader
- UML快速理解(转)
- 新手如何快速理解js异步编程
- 跟我快速理解Dubbo:-2 架构设计详解
- 快速排序的理解
- 理解快速生成树协议(RSTP)(二)