最近写组件，这两个属性的结果搞的有点晕，我检查的文件及资料，这两个性质如下面总结：
他一直在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;1011 obj = obj.offsetParent;12 }1314 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>
转载于:https://www.cnblogs.com/bhlsheji/p/4569824.html
相关资源：数据结构—成绩单生成器