如何获取元素距离页面顶部的高度?

html-css012

如何获取元素距离页面顶部的高度?,第1张

1、首先在html页面上,看到有一个按钮,要获得这个按钮离顶部的距离。

2、在按钮的事件函数里,先取这个按钮的offset数据,通过jquery的offset方法。

3、得到的结果是一个数组对象,只要获取里面的top数据就行了。

4、使用log方法,把数据输出到浏览器的控制台。

5、运行页面,看到现在的按钮位置。距离顶部估计是500px左右吧,点击一下这个按钮。

6、然后看一下控制台上的数据,得到距离为439的像素。

用jquery 可以轻松获取到:

代码:

var obj=$('.ts')

var offset = obj.offset()

var width=offset.left+obj.width()

OK! width就是你想要的父对象a 标签的宽度.

怎么样?可以吧.

对于没有设置宽度的元素、亦或CSS样式非内嵌式的,js原生写法可以通过offsetWidht来获取宽度

即:document.getElementById("#id").offsetWidth

ps:对于设置了CSS样式的元素(内联、内嵌、外联)offsetWidth 也都可以获得值

所以,jquery的width()与js的offsetWidth都可以获取元素的宽度,但有个区别:

.width()的值单纯是内容区域的宽度、不包括内外补丁和border。ie6+和chrome相同。

offsetWidth :包括了内补丁和border,不包括外补丁。ie6+和chrome相同