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 相关文章推荐
jQuery 方法大全方便学习参考
Feb 25 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
原生js实现点击轮播切换图片
Feb 11 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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
原生js生成图片验证码
2020/10/11 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python使用Tkinter显示网络图片的方法
2015/04/24 Python
pygame播放音乐的方法
2015/05/19 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python实现控制台打印的方法
2019/01/12 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
python django model联合主键的例子
2019/08/06 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
创建索引时需要注意的事项
2013/05/13 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
SQL Server表分区删除详情
2021/10/16 SQL Server
Vue操作Storage本地化存储
2022/04/29 Vue.js