offsettop（offsetHeight 、offsetTop、scrollTop三者的意思和区别）
本文目录
offsetHeight 、offsetTop、scrollTop三者的意思和区别
offsetHeight = 内容可视区域的高度+ 滚动条 + 边框。obj.offsetTop 指 obj 距离上方或上层控件的位置scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
javascript中scrollTop和offsetTop有什么区别
scrollTop是指某个可滚动区块向下滚动的距离，offsetTop则是元素的上边框与父元素的上边框的绝对距离。
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时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．
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=“
为什么用offsetTop获取到的距离不对
scrollTop是指某个可滚动区块向下滚动的距离，比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10。 offsetTop则是元素的上边框与父元素的上边框的绝对距离。 两者描述的不是同一个东西，所以没有可比性。 【TSD。M】。
更多文章：
2025年2月22日 11:50
linux mint（Linux Mint 相比于ubuntu的优点是什么优势在哪里）
2025年3月8日 12:10
2025年3月3日 18:00
2025年2月9日 04:20
2025年3月21日 11:40
2025年2月8日 23:40
tablelayout（VB.NET中如何向TableLayoutPanel控件指定行和列写数据）
2025年3月24日 16:30
2025年3月31日 05:00
2025年3月1日 19:50
2025年3月19日 10:30
2025年2月17日 20:30
楼兰小说论坛（打不开楼兰小说论坛的网页啊！一点击就出现“Hi,真不巧，网页走丢了”，这是怎么回事难道被了）
2025年3月5日 13:10
局部变量和全局变量的区别（全局变量和局部变量有什么区别是怎么实现的）
2025年3月23日 08:00
html中target的用法（HTML 中target的作用）
2025年3月31日 14:10
2025年2月10日 14:10
fastjson和jackson（spring mvc使用fastjson好还是jackson）
2025年3月25日 21:20
2025年2月27日 21:10
2025年3月4日 08:00
2025年3月28日 19:40
factory reset是什么意思（Factory Reset 是什么意思）
2025年3月15日 09:00
