js实现jquery的offset()方法(获取当前元素相对于文档的偏移量 )

JavaScript016

js实现jquery的offset()方法(获取当前元素相对于文档的偏移量 ),第1张

最近做项目,由于zepto使用的功能较少,想将zepto的功能用较少原生实现,其中有个实现zepto的offset()方法取到各种值的难为了我,我百度了下,大体网上千篇一律的这样写到

我本着试试看的态度将这个方法炒了上去,打印出值结果与我需要的值相差甚远,为此我仔细翻了下源码,源码见下面链接

源码

找到如下方法getBoundingClientRect,翻了下caniuse发现兼容性还好(本人移动端),故可以写成以下方式

如果要考虑兼容性,请仔细看zepto源码

另外上述

改成

也可以实现

首先介绍几个属性(都是jquery的属性,可以免去兼容性的烦恼)

1. 网页被卷起来的高度/宽度(即浏览器上方隐藏的页面内容高度)

2. 浏览器工作区域的高度和宽度

3. 元素距离文档顶端和左边的偏移值

4. 页面的文档高度

参考文章 http://www.cnblogs.com/fnz0/p/5510758.html

offsetY是什么?javascript没有这个属性。

是不是想获取元素离页面顶部的偏移值?

demo:

<div id="box" style="position:absolutetop:50pxbackground:#F00">111</div>

<script type="text/javascript">

var offsetY=document.getElementById('box').offsetTop

alert(offsetY)

</script>