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 相关文章推荐
JS仿flash上传头像效果实现代码
Jul 18 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
JS实现分页导航效果
Feb 19 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
深入剖析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 日,周,月点击排行统计
2012/01/11 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
vuejs指令详解
2017/02/07 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
Python常用类型转换实现代码实例
2020/07/28 Python
python matplotlib库的基本使用
2020/09/23 Python
python3排序的实例方法
2020/10/20 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
作风建设年活动总结
2014/08/27 职场文书
保管员岗位职责
2015/02/14 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
导游词幽默开场白
2019/06/26 职场文书
了解Redis常见应用场景
2021/06/23 Redis
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电