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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 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读注册表
2006/10/09 PHP
PHP云打印类完整示例
2016/10/15 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
javascript常见操作汇总
2014/09/03 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
下载给定网页上图片的方法
2014/02/18 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python快速从注释生成文档的方法
2016/12/26 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python批量获取html内body内容的实例
2019/01/02 Python
python实现按行分割文件
2019/07/22 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python实现元素等待代码实例
2019/11/11 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
有关打架的检讨书
2014/01/25 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
工地安全生产标语
2014/06/06 职场文书
酒店前台辞职书
2015/02/26 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL