HTML - DOM 元素 offsetLeft 属性

元素的offsetTop属性返回元素上边缘与其最近的已定位祖先元素上边缘之间的垂直距离（以像素为单位）。

这包括元素的边距、父容器的上内边距、滚动条（如果存在）和边框，所有值都以像素为单位。

语法

element.offsetTop

返回值

offsetTop 属性返回一个整数值，表示元素上边缘与其最近的已定位祖先元素上边缘之间的距离（以像素为单位）。

HTML DOM 元素 'offsetTop' 属性示例

以下是一些示例，用于更好地理解 'offsetTop' 属性的用法。

使用 offsetTop 获取元素位置

此示例演示了如何使用 offsetTop 属性获取 <div> 元素的位置。单击按钮时，它将显示 'myDiv' 元素的顶部和左侧位置。

<!DOCTYPE html>
<html lang="en">
<head>  
    <style>
        #myDiv {
            /*position: relative;*/
            top: 50px;
            left: 100px;
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>   

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetTop Property</h2>
    
    <div id="myDiv">Example Div</div>
    
    <button onclick="getPos()">Get Position</button>
    <p id="Display"></p>
    
    <script>
        function getPos() {
            const myDiv = document.getElementById('myDiv');
            const posTop = myDiv.offsetTop;
            const posLeft = myDiv.offsetLeft;
            document.getElementById('Display').textContent = 
            `Position Top: ${posTop}px, Left: ${posLeft}px`;
        }
    </script>
</body>

</html>

显示相对于容器的项目位置

此示例演示了 offsetTop 属性的用法。以下代码创建了一个带有三个项目的滚动条容器，然后计算其垂直位置，单击按钮后，它将以像素为单位显示这些位置。

<!DOCTYPE html>
<html lang="en"> 
<head>
<style>
    .con {
        position: relative;
        border: 1px solid black; 
        height: 200px;
        overflow-y: scroll;
    }
    .item {
        height: 100px;
        margin: 20px;
        background-color: lightblue;
    }
</style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetTop Property</h2>
    <p>Displays the positions of the container..</p>
    <div class="con">
        <div class="item" id="item1">Item 1</div>
        <div class="item" id="item2">Item 2</div>
        <div class="item" id="item3">Item 3</div>
    </div>

    <button onclick="pos()">Show Item Positions</button>
    <div id="pdisy"></div>

    <script>
    function pos() {
        const items = document.querySelectorAll('.item');
        let info = '';
        
        items.forEach((item, index) => {
            const itemTop = item.offsetTop;
            info+=`Item ${index + 1}:Top${itemTop}px<br>`;
        });

        document.getElementById('pdisy').innerHTML =info;
    }
    </script>
</body>

</html>

计算嵌套元素中的总 offsetTop

此示例演示了 offsetTop 属性的用法。此示例演示了如何使用 offsetTop 属性计算容器内子元素的总垂直高度。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        #pE {
            border: 1px solid black; 
        }
        .cE {
            margin: 10px;
            width: 50px;
            height: 50px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetTop Property</h2>
    <div id="pE">
        <div class="cE">Child 1</div>
        <div class="cE">Child 2</div>
        <div class="cE">Child 3</div>
    </div>

    <button onclick="topval()">
        Show Total Offset Top
        </button>
    <div id="output"></div>

    <script>
        function topval() {
            const pE = document.getElementById('pE');
            let total = 0;
            Array.from(pE.children).forEach(child => {
                total += child.offsetTop;
            });
            document.getElementById('output').textContent=
            `Total offset top of children: ${total}px`;
        }
    </script>
</body>

</html>

支持的浏览器

属性
offsetTop	是	是	是	是	是

html_dom_element_reference.htm

打印页面