js offset

// 获取元素的 offset 信息示例

// HTML 结构
/*
<div id="myElement" style="position: absolute; top: 100px; left: 200px; width: 300px; height: 200px;">
    这是一个示例元素
</div>
*/

// JavaScript 代码
window.onload = function() {
    var element = document.getElementById("myElement");

    // 获取元素的 offsetTop 和 offsetLeft
    var top = element.offsetTop;
    var left = element.offsetLeft;

    // 获取元素的 offsetWidth 和 offsetHeight
    var width = element.offsetWidth;
    var height = element.offsetHeight;

    console.log("元素距离顶部的距离: " + top + "px");
    console.log("元素距离左侧的距离: " + left + "px");
    console.log("元素的宽度: " + width + "px");
    console.log("元素的高度: " + height + "px");

    // 获取父级元素的 offset 信息
    var parentElement = element.offsetParent;
    console.log("父级元素: " + parentElement.tagName);
};

// 解释说明：
// offsetTop 和 offsetLeft 分别表示元素相对于其包含块（offsetParent）的 top 和 left 边缘的距离。
// offsetWidth 和 offsetHeight 分别表示元素的宽度和高度，包括内边距（padding）、边框（border），但不包括外边距（margin）。
// offsetParent 返回最近的（指文档流中位置最近的）包含该元素的定位元素。如果元素没有被包含在任何已定位的元素中，则返回最近的表格单元格、body 元素或 null。