js中getBoundingClientRect的作用及兼容方案详解


Posted in Javascript onFebruary 01, 2018

1、getBoundingClientRect的作用

getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。

执行 object.getBoundingClientRect();会得到元素的top、right、bottom、left、width、height属性,这些属性以一个对象的方式返回。

getBoundingClientRect()

这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

var box=document.getElementById('box'); // 获取元素

alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

2.getBoundingClientRect上下左右属性值解释

主要是left和bottom要解释一下,left是指右边到页面最左边的距离,bottom是指底边到页面顶边的距离。

看图:

 js中getBoundingClientRect的作用及兼容方案详解

3. 浏览器兼容性

ie5以上都能支持,但是又一点点地方需要修正一下,

IE67的left、top会少2px,并且没有width、height属性。

4、利用getBoundingClientRect来写一个获取html元素相对于视窗的位置集合的方法

<div id="test" style="width: 100px; height: 100px; background: #ddd;"></div>
<script>
 function getObjXy(obj){
  var xy = obj.getBoundingClientRect();
  var top = xy.top-document.documentElement.clientTop+document.documentElement.scrollTop,//document.documentElement.clientTop 在IE67中始终为2,其他高级点的浏览器为0
   bottom = xy.bottom,
   left = xy.left-document.documentElement.clientLeft+document.documentElement.scrollLeft,//document.documentElement.clientLeft 在IE67中始终为2,其他高级点的浏览器为0
   right = xy.right,
   width = xy.width||right - left, //IE67不存在width 使用right - left获得
   height = xy.height||bottom - top;

  return {
   top:top,
   right:right,
   bottom:bottom,
   left:left,
   width:width,
   height:height
  }
 }

 var test = getObjXy(document.getElementById('test'));
 alert("top:" + test.top + ", right:" + test.right + ", bottom:" + test.bottom + ", left:" + test.left);
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
JS中数组重排序方法
Nov 11 Javascript
layui使用label标签的方法
Sep 14 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 #Javascript
JS 实现百度搜索功能
Feb 01 #Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 #Javascript
微信小程序日期时间选择器使用方法
Feb 01 #Javascript
NW.js 简介与使用方法
Feb 01 #Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 #Javascript
Vue组件之自定义事件的功能图解
Feb 01 #Javascript
You might like
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
js jquery数组介绍
2012/07/15 Javascript
javascript解析json实例详解
2014/11/05 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
python 爬取微信文章
2016/01/30 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python 求向量的余弦值操作
2021/03/04 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
在校生党员自我评价
2013/09/25 职场文书
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
运动会广播稿400字
2014/01/25 职场文书
团购业务员岗位职责
2014/03/15 职场文书
合伙经营协议书范本
2014/04/18 职场文书
小学教师师德承诺书
2014/05/23 职场文书
技术股份合作协议书
2014/10/05 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers