getBoundingClientRect()方法
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
1.语法:这个方法没有参数。
rectObject = object.getBoundingClientRect();
2.返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上, 右 , 下,和左 )表示的坐标的矩形,以像素为单位。
rectObject.top:元素上边到视窗上边的距离;
rectObject.right:元素右边到视窗左边的距离;
rectObject.bottom:元素下边到视窗上边的距离;
rectObject.left:元素左边到视窗左边的距离;
示图:
3. 兼容性:我用ie11的Document Mode模式测试,ie5以上都能支持。
PC端:
Mobile端:
4.width和height:ie9以上支持width/height属性。
兼容ie6~ie8的width/height的写法:
var rectWidth = rectObject.right - rectObject.left;rectHeight = rectObject.bottom - rectObject.top;
5.在ie7及ie7以下left和top会多出两个像素。
ie7下测试:
chrome下测试:
在百度经验下找到document.documentElement在ie7及ie7以下会多出两个像素。为了搞明白document.documentElement是什么?我把它的tagName打印出来。
ie7下:
在ie7及ie7以下的html元素坐标会从(2, 2)开始算起,在ie8已经修复了这个bug。这就是多出两个像素的原因。下面我们做下兼容:
var rectLeft = rectObject.left - document.documentElement.clientLeft || 2;rectRight = rectObject.right - document.documentElement.clientLeft || 2;rectBottom = rectObject.bottom - document.documentElement.clientTop || 2;rectTop = rectObject.top - document.documentElement.clientTop || 2;
转载于:https://www.cnblogs.com/xuzhudong/p/7059504.html
getBoundingClientRect()方法相关推荐
- JavaScript中getBoundingClientRect()方法详解
JavaScript中getBoundingClientRect()方法详解 getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bo ...
- getBoundingClientRect计算页面元素的offsetLeft、offsetTop
网上很流行的方法,不用框架时: function getOffsetPosition(element){ var posTop = 0, posLeft = 0; do { posTop += ele ...
- 093_Element.getBoundingClientRect()方法和DOMRect对象
1. Element.getBoundingClientRect() 1.1. Element.getBoundingClientRect()方法返回值是一个DOMRect对象, 对象拥有left, ...
- 前端性能优化的七种方法
前端性能优化主要有七种方法,包括减少请求数量.减少资源大小.优化网络连接.优化资源加载.减少重绘回流.使用性能更好的API和webpack优化 1.减少请求数量 1.1 图片处理 1.1.1 雪碧图 ...
- 获取元素到body顶部的距离,offsetTop和offsetParent,getBoundingClientRect
最近在写一个可见曝光的sdk,是当元素显示在可见区域的时候才算作曝光,并上报给服务端.思路是在元素请求回来并渲染完成之后,计算元素距离document顶部的距离offset,当页面滚动的时候,计算of ...
- html5获取图形坐标,WKWebView获取H5页面里图片地址以及图片相对视图窗口的坐标的方法...
最近有个需求是点击放大查看H5内容页面的图片,寻找到一个比较轻量的库YHPhotoBrowser,其中根据图片位置来缩放的动画需要传递一个图片所在屏幕里的位置CGRect,想获取H5的图片坐标那就需要 ...
- vue中实现图片懒加载的方法(一)
1.背景: 前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载. 2.懒加载的意义 图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是 ...
- JS获取div高度的方法
有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...
- offsetParent、getBoundingClientRect与其他位置相关属性
offsetParent.getBoundingClientRect与其他位置相关属性 写在前面:本文章中的代码演示,默认清除的了 body 和 html 的 margin.padding. 定位父级 ...
最新文章
- 生物信息「知识图谱」
- 微信小程序客服消息使用指南
- 数据结构与算法 | 直接选择排序、双向选择排序
- dotnet core开发体验之开始MVC
- java gt_JAVA泛型知识--gt; lt;? extends Tgt;和lt;? super Tgt;
- leetcode 1218 python
- string字符串数字自增_常见的字符串操作
- 教你手工mysql拆库
- 错误提示:java.lang.IllegalArgumentException解决方法
- 技术狂何波:战斗在程序化交易第一线
- addrule android用法,RelativeLayout.LayoutParams 使用addRule失效的问题解决办法
- 同济大学计算机科学系下设几个专业,同济大学计算机科学与技术工程系简介
- 中小型企业需用什么样的生产加工管理软件?
- 网络环路原理及其影响
- 笔记:centos7 换内核安装锐速(该方法不好用,不建议)
- 用户画像数据指标体系之用户属性维度
- LittleVGL『Objects对象』介绍
- matlab设l创建网络,利用matlab进行简单的贝叶斯网络构建 | 学步园
- 那些适合仓库管理员使用的办公软件
- c语言无符号整型右移,c语言 java 有符号数,无符号数. 左移,右移运算