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" οnclick="test()"/>
?</BODY>
</HTML>
<script type="text/javascript" ></script>
總結
以上是生活随笔為你收集整理的offsetTop和scrollTop的差别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 通过Blender将PMX模型转为FBX
- 下一篇： 君澜酒店集团与来也股份合作，打造国内“冰