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

列印頁面