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中面向对象技术的模拟
Sep 25 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
vue组件间通信子与父详解(二)
Nov 07 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 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
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
phpinfo的知识点总结
2019/10/10 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
中专自荐信
2013/10/13 职场文书
小学教师自我鉴定
2013/11/07 职场文书
配件采购员岗位职责
2013/12/03 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
检察官就职演讲稿
2014/01/13 职场文书
大学军训感言600字
2014/02/25 职场文书
服装店营销方案
2014/03/10 职场文书
ktv筹备计划书
2014/05/03 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技