如何获取页面中任意元素的offsetLeft和offsetTop
来源:互联网 发布:网络体系结构及作用 编辑:程序博客网 时间:2024/05/19 23:53
这个功能前几天写过一次,今天再写一次居然花了十几分钟,研究了一下,还是做个笔记吧。
我们知道,获取元素E的offsetLeft、offsetTop直接用E.offsetLeft/E.offsetLeft就可以了,但是当要获取多层嵌套的元素相对于body的左边距和上边距时,就需要用到下面的函数:
<script>function getOffset(obj) //获取任意元素的offsetLeft/offsetTop值{var arr=[]var offsetL=0var offsetT=0while(obj!=window.document.body&&obj!=null){offsetL+=obj.offsetLeftoffsetT+=obj.offsetTopobj=obj.offsetParent}arr.push(offsetL,offsetT)return arr}</script>
其中要注意的地方是:
1、obj!=window.document.body而不是obj!=window.body
2、obj=obj.offsetParent而不是obj=obj.parentNode
offsetParent是相对于obj最近的有定位的父级,obj的offsetLeft/offsetTop也正是相对于它而言的,需要注意。
以上代码经过本人测试可用,测试时请清除浏览器默认内外边距,因为不同浏览器的默认样式有所差异。
- 如何获取页面中任意元素的offsetLeft和offsetTop
- getBoundingClientRect计算页面元素的offsetLeft、offsetTop
- 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft
- 获取offsetTop和offsetLeft的值(兼容)
- 【转】js中offsetLeft,offsetTop,offsetParent详解
- js 中offsetTop、offsetLeft、offsetWidth、offsetHeight详解
- 获取栈中任意位置的元素
- 关于offsetleft,offsettop的一些资料
- offsetTop、 offsetLeft、offsetWidth、offsetHeight的用法
- offsetLeft,scrollLeft,offsetTop,scrollTop等等的用法
- offsetLeft,offsetTop,offsetWidth,offsetHeight的使用
- offsetLeft,scrollLeft,offsetTop,scrollTop等等的用法
- js中offsetLeft/offsetTop与jq中offset().left/offset().top的区别
- js中offsetLeft/offsetTop与jq中offset().left/offset().top的区别
- HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offset
- 网页里的各种高度和宽度(2) offsetTop、offsetLeft、offsetWidth、offsetHeight
- OffsetLeft、offsetTop、offsetWidth、offsetHeight和clientWidth、clientHeight、clientLeft、clientTop的区别:
- offsetLeft,offsetTop,scrollLeft,scrollTop
- ubuntu下安装Apache+PHP+Mysql
- shell脚本-利用check_snmp查看远程linux操作系统版本
- iwcコピー時計マーティンはいっしょに3モデル
- 关于抽象类与接口
- mysql索引全面观和建立索引的代价
- 如何获取页面中任意元素的offsetLeft和offsetTop
- bootstrap中的dropdown
- 员工综合素质面试题整理和收集
- iwcコピー時計の精致な石英の腕時計を全部で
- 关于EditText获取焦点,隐藏软键盘的问题
- android 实现由下至上弹出并位于屏幕底部的提示框
- 给定某年某月,输出十天后是几年几月几日
- 2013.11.20
- hash map 中hash()方法分析