offsetTop和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
对象的最顶部到对象在当前窗体显示的范围内的顶边的距离.
即是在出现了纵向滚动栏的情况下,滚动栏拉动的距离.

 

8.測试offsetTop和scrollTop的html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
 function test(){
  var oIframe = document.getElementById("div1");
  alert(oIframe.offsetTop);
  alert(oIframe.scrollTop);
 }
  //-->
  </SCRIPT>
 </HEAD>

 <BODY style="border:1px red solid;padding:20px;margin:0px;">
 <div id="div1" style="border:1px blue solid;height:400px;width:200px;overflow:auto">
 <iframe id="iframe1" src="http://www.baidu.com" width="400" height="500" style="border:1px red solid;" scrolling="no">
 </iframe>
 </div>
 <input type="button" value="OK" onclick="test()"/>
 </BODY>
</HTML>
<script type="text/javascript" ></script>

你可能感兴趣的:(scrollTop)