offsetTop：以 CSS 像素为单位返回元素上边框距其 offsetParent 上边框的距离。
offsetLeft：以 CSS 像素为单位返回元素相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
这里最主要的是找准 offsetParent。
其实很简单，比如我们要计算A元素的 offsetTop， 那么先要找到A元素的offsetParent，A元素的offsetParent应该是离A元素最近的父元素，并且父元素设置了position：relative或absolute属性，如果没有匹配到任何父元素，那么应该以窗口为基准计算元素的offsetTop。
下面用实例来说明：
<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>;
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
</head>
<body style="margin:0;padding-left:10px;">
<div id="main">
<div id="first" style="width:300px; height:200px; border:1px solid red">300X200的盒子</div>
<div id="second">
<div id="third">offsetTop详解</div>
</div>
</div>
<script type="text/javascript">
var oTop=document.getElementById("third").offsetTop;//此时获取id为third元素的offsetTop，是以窗口基准，即得到的值是该元素距离窗口的垂直距离(202px, 算上了id为first元素的border)。
var oLeft=document.getElementById("third").offsetLeft; //以窗口基准，值为10px(body设置了10px的左内边距)。
//下面我们改变一下id为second元素的css，加上"style='position:relative;padding-left:100px'"，然后重新获取id为third元素的offsetTop，此时值为0；因为现在不是以窗口基准，而是以id为third元素为基准计算。同理offsetLeft的值是100px;
</script>
</body>
</html> 
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
602
