js获取元素相对窗口位置的实现代码


Posted in Javascript onSeptember 28, 2014

JS获取元素的offsetTop,offsetLeft等属性

obj.clientWidth //获取元素的宽度

obj.clientHeight //元素的高度
obj.offsetLeft //元素相对于父元素的left
obj.offsetTop //元素相对于父元素的top
obj.offsetWidth //元素的宽度
obj.offsetHeight //元素的高度

区别:

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = width + padding + border
offset比client多了border的宽度

//获取元素的纵坐标(相对于窗口)
function getTop(e){
  var offset=e.offsetTop;
  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
  return offset;
}
//获取元素的横坐标(相对于窗口)
function getLeft(e){
  var offset=e.offsetLeft;
  if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
  return offset;
}

之前也写过一篇JS关于获取元素位置的文章:JS获取元素的offsetTop,offsetLeft等属性,我们可以通过offsetTop和offsetLeft属性获取元素相对窗口的位置,但offsetTop和offsetLeft属性都是相对于父元素定位的,而通常需要获取位置的元素都不是在最外层,所以遍历上级元素的offset相关属性少不了。那效率就成问题了。

//获取元素的纵坐标(相对于窗口)
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标(相对于窗口)
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

好在浏览器给我提供了相应的接口getBoundingClientRect,这个方法最早出现在IE浏览器中,后来的浏览器也跟着支持了这个方法,而且还更加完善,IE中只能获取到元素的left,top,bottom,right的属性,而后面的现代浏览器还能获取到元素的width和

Chrome Firefox (Gecko) Internet Explorer Opera Safari
1.0 3.0 (1.9) 4.0 (Yes) 4.0

这里要注意的是,bottom是元素底部相对于窗口顶部的距离,而不是像css里面position的bottom相对于窗口底部,同理,rihgt属性是元素最右边相对于窗口左边的距离。

var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
  "left:"+pos.left +
  "bottom:"+pos.bottom +
  "right:"+pos.right +
  "width:"+pos.width +
  "height:"+pos.height

原创文章,转载请注明: 转载自前端开发

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
js实现div在页面拖动效果
May 04 Javascript
整理一下常见的IE错误
Nov 18 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
封装一下vue中的axios示例代码详解
Feb 16 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 #Javascript
浏览器缩放检测的js代码
Sep 28 #Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 #Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 #Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 #Javascript
js文件包含的几种方式介绍
Sep 28 #Javascript
javascript中bind函数的作用实例介绍
Sep 28 #Javascript
You might like
PHP如何抛出异常处理错误
2011/03/02 PHP
php自定文件保存session的方法
2014/12/10 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
python简单获取数组元素个数的方法
2015/07/13 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python安装gdal的两种方法
2019/10/29 Python
Django-migrate报错问题解决方案
2020/04/21 Python
怎么快速自学python
2020/06/22 Python
openCV提取图像中的矩形区域
2020/07/21 Python
Python request post上传文件常见要点
2020/11/20 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
2014年新教师工作总结
2014/11/08 职场文书
2014年销售部工作总结
2014/12/01 职场文书
药店收银员岗位职责
2015/04/07 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python