offsetleft，offsettop，scrollleft，scrolltop

转自：http://cxhgoo.iteye.com/blog/337615

offsetleft，offsettop，scrollleft，scrolltop

一直以来对offsetleft，offsettop，scrollleft，scrolltop这几个方法很迷糊，花了一天的时间好好的学习了一下．得出了以下的结果：
1.offsettop     :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetleft    :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetwidth   :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetwidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetheight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetheight则返回在不同页面中对象的高度值而不是百分比值

5.offsetparent  :
当前对象的上级层对象.
注意.如果对象是包括在一个div中时,此div不会被当做是此对象的上级层,(即对象的上级层会跳过div对象)上级层是table时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．


得到绝对位置脚本代码
1function getposition(obj)
2{
3    var left = 0;
4    var top  = 0;
5
6    while(obj != document.body)
7    {
8        left = obj.offsetleft;
9        top  = obj.offsettop;
10
11        obj = obj.offsetparent;
12    }
13
14    alert("left is : " + left + "\r\n" + "top  is : " + top);
15}

6.scrollleft    :
对象的最左边到对象在当前窗口显示的范围内的左边的距离．
即是在出现了横向滚动条的情况下，滚动条拉动的距离．

7.scrolltop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．

Feedback
#1楼    回复  引用    
2008-05-27 04:21 by myun [未注册用户]
8 left += obj.offsetleft;
9 top += obj.offsettop;

这两行要这样才能获得绝对位置
#2楼    回复  引用    
2008-12-09 14:07 by asdwewe32 [未注册用户]
<!--现场图片开始-->
<div class="space14"></div>
<div class="pictit">现场图片</div>
<div class="piccon">
<div class="space20"></div>
<div class="pics">
<div class="lj"><img src="images/l.gif" id=img_l onclick=doslide(-1) alt=向左滚动/></div>
<div id=description>
<div id=content0>
<ul id=piccontent>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/1.jpg" /></li>
</ul></div>
</div>
<div class="yj"><img src="images/r.jpg" id=img_r onclick=doslide(1) alt=向右滚动 /></div>
<div class="clear-both"></div>
</div>
</div>
<!--现场图片结束--> <!--现场图片开始-->
<div class="space14"></div>
<div class="pictit">现场图片</div>
<div class="piccon">
<div class="space20"></div>
<div class="pics">
<div class="lj"><img src="images/l.gif" id=img_l onclick=doslide(-1) alt=向左滚动/></div>
<div id=description>
<div id=content0>
<ul id=piccontent>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/1.jpg" /></li>
</ul></div>
</div>
<div class="yj"><img src="images/r.jpg" id=img_r onclick=doslide(1) alt=向右滚动 /></div>
<div class="clear-both"></div>
</div>
</div>