jQuery的position(),offset(),scrollTop()/scrollLeft()
2020-12-13 02:49
标签:style blog class code c color ---恢复内容开始--- jquery定位函数:offset,position,scrollTop/scrollLeft (1)offset:获取当前元素相对于文档的偏移。只对可见元素有效。 (2) position:获取元素相对于最近的一个position为relative or
absolute的元素的祖父节点的相对偏移。 (3)scrollTop()/scrollLeft()是分别获取元素滚动条距顶端的距离。 $(selector).offset()与$(selector).position()都返回包含top、left属性的对象
top/left的值为number scrollTop() /scrollLeft()的返回值也为number类型 scroll()返回该对象本身 参考例子 测试代码: 在firebug中得到的结果为: 这个结果感觉很奇怪,第一二个结果还是意料之中,但是第三个是将滚动条拉到最下方的时算出的结果。 奇怪的事情出现了。 padding不起作用了!!! 盒子模型 左至右 margin-left |border-left padding-left width
padding-right|border-right margin-right 而offset()position() 读取的值是margin-left(margin-top)+border-left(border-top)
padding不在其内 继续做修改: ****行内元素会默认1px间隔 ---恢复内容结束--- jQuery的position(),offset(),scrollTop()/scrollLeft(),搜素材,soscw.com jQuery的position(),offset(),scrollTop()/scrollLeft() 标签:style blog class code c color 原文地址:http://www.cnblogs.com/hansu/p/3720806.html
"1500px"
>
"position:relative;margin-top:1000px;height:300px;border:1px solid #0C6;"
>
"margin:50px;"
>compute my height
$(
‘div‘
).offset()
top
:
1000
;
left
:
8
; //浏览器默认body 与视窗margin 为8px
$(
‘p‘
).offset()
top
:
1051
;
left
:
9
;
$(
‘div‘
).scrollTop()=
0
;$(
‘div‘
).scrollLeft()=
0
;
$(
‘p‘
).position();
top
:
0
;
left
:
0
;
"height:1500px;"
>
"position:relative;margin-top:1000px;height:300px;"
>
"padding:50px;"
>compute my height
$(
‘div‘
).offset()
top
:
1000
;
left
:
8
;
$(
‘p‘
).offset()
top
:
1000
;
left
:
8
;
$(
‘div‘
).scrollTop()=
0
;$(
‘div‘
).scrollLeft()=
0
;
$(
‘p‘
).position();
top
:
0
;
left
:
0
;
"height:1500px;"
>
"position:relative;margin-top:1000px;height:300px;border:1px solid #666;"
>
"padding:50px;"
>compute my height
$(
‘div‘
).offset()
top
:
1000
;
left
:
8
;
$(
‘p‘
).offset()
top
:
1017
;
left
:
9
;
//div>p会产生8px的margin$(
‘div‘
).scrollTop()=
0
;
$(‘div‘
).scrollLeft()=
0
;
$(
‘p‘
).position();
top
:
0
;
left
:
0
;
文章标题:jQuery的position(),offset(),scrollTop()/scrollLeft()
文章链接:http://soscw.com/essay/26383.html