js的offsetTop到底是距离父元素的距离还是距离body的距离，或者是屏幕顶端的距离啊？好混乱
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js的offsetTop到底是距离父元素的距离还是距离body的距离，或者是屏幕顶端的距离啊？好混乱相关的知识，希望对你有一定的参考价值。
屏幕顶端的距离网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）
(javascript) document.documentElement.scrollTop //firefox
(javascript) document.documentElement.scrollLeft //firefox
(javascript) document.body.scrollTop //IE
(javascript) document.body.scrollLeft //IE
(jqurey) $(window).scrollTop()
(jqurey) $(window).scrollLeft()
网页工作区域的高度和宽度
(javascript) document.documentElement.clientHeight// IE firefox
(jqurey) $(window).height()
元素距离文档顶端和左边的偏移值
(javascript) DOM元素对象.offsetTop //IE firefox
(javascript) DOM元素对象.offsetLeft //IE firefox
(jqurey) jq对象.offset().top
(jqurey) jq对象.offset().left 参考技术A <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>_</title>
<style type="text/css">
htmlbackground:#fff; padding:10px; margin:0;
bodybackground:#ccc; padding:20px; margin:0;
#outer background:#0a0; padding:50px; height:500px;
#inner background:#a00; height:100px;
</style>
</head>
<script type="text/javascript">
window.onload = function()
var inner = document.getElementById("inner");
alert(inner.offsetTop); // 80
;
</script>
<body>
<div id="outer">
<div id="inner">abc</div>
</div>
</body>
</html>
是到浏览器顶部的距离
谢谢哦，我改了一下你的代码，发现出现滚动条后，alert出来的还是80，是不是offsetTop获取的是该元素到html标签上边距的距离？出现滚动条inner被滚上去后获取的还是80没变。那这个属性和jquery的offset().top是一样的？
追答2次回复都被度娘吃了?
scrollTop和scrollPath有啥区别？
参考技术AscrollTop是指某个可滚动区块向下滚动的距离，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="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>
以上是关于js的offsetTop到底是距离父元素的距离还是距离body的距离，或者是屏幕顶端的距离啊？好混乱的主要内容，如果未能解决你的问题，请参考以下文章
父元素以relative方式定位的子元素怎么用js获取子元素到网页顶部的距离