HTML | DOM offsetTop 属性

简介

offsetTop 是 DOM 元素的只读属性，用于获取元素相对于其最近的已定位父元素的顶部的偏移量（以像素为单位）。

用法

要获取元素的 offsetTop，可以使用以下方法：

var element = document.getElementById("myElement");
var offsetTopValue = element.offsetTop;

返回值

offsetTop 返回一个整数值，表示元素相对于其最近的已定位父元素的顶部的偏移量。

注意事项

• offsetTop 只返回相对于已定位的父元素的偏移量，并不会考虑滚动条的偏移量。
• 如果一个元素没有已定位的父元素，offsetTop 的值将是相对于 body 元素的偏移量。
• offsetTop 的值是相对于元素的边框外侧而不是内侧。
• offsetTop 是只读属性，无法直接修改元素的偏移量。

示例

假设有以下 HTML 代码：

<div id="container" style="position: relative; height: 300px; overflow-y: scroll;">
    <div id="myElement" style="position: absolute; top: 50px;">Hello World!</div>
</div>

使用 JavaScript 获取 #myElement 元素的 offsetTop 值：

var element = document.getElementById("myElement");
var offsetTopValue = element.offsetTop;
console.log(offsetTopValue);  // 输出 50

总结

offsetTop 属性是 DOM 元素的重要属性之一，可以用于获取元素相对于已定位父元素顶部的偏移量。了解该属性的用法和特性，有助于开发者正确控制元素在页面布局中的位置。