HTML - DOM 元素 offsetLeft 屬性

元素的**offsetLeft**屬性提供了一個基於畫素的測量值，表示從元素的左邊界到其最近的定位父元素的左邊界的距離。

這包括元素的邊距、左側填充、捲軸（如果存在）以及父容器的邊框，所有這些都以畫素為單位測量。

語法

element.offsetLeft

返回值

offsetLeft 屬性返回一個整數值，包含從元素左邊緣到其最近的定位父元素左邊緣的基於畫素的距離。

HTML DOM 元素“offsetLeft”屬性示例

以下是一些示例，用於說明“offsetLeft”屬性的用法，以便更好地理解。

獲取偏移量左側的值

此示例顯示了 offsetLeft 屬性的基本用法，以獲取元素相對於其偏移父元素的水平偏移量。它包括新增一個帶有 id“od”的**<div>**元素來顯示偏移值。

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

        #od { 
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>HTML - DOM Element</h1>
        <h2>offsetHeight Property</h2>
    <div id="ex">Example Element</div>
        <br>
    <button onclick="showvalt()">Show OffsetLeft</button>
        
    <div id="od">Offset Left: <span id="olv"></span> 
        pixels
    </div>

    <script>
        const ex = document.getElementById('ex');
        const oldis = document.getElementById('olv');

        function showvalt() {
            const olv = ex.offsetLeft;
            oldis.textContent = `${olv}px`;
        }
    </script>
</body>

</html>

使用“offsetLeft”檢索水平偏移量

此示例演示如何使用 offsetLeft 屬性獲取元素的水平位置，包括邊距、填充和父容器的邊框。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
    #pc { 
        width: 300px;
        height: 200px; 
        border: 5px solid #ccc;
        padding: 20px;
    }

    #ex { 
        left: 50px;
        width: 200px;
        height: 100px;
        background-color: lightblue; */
    }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetLeft Property</h2>
    <div id="pc">
        <div id="ex">Example Element</div>
    </div>
    <br>
    <button onclick="sol()">Show OffsetLeft</button>

    <script>
    const ex = document.getElementById('ex');

    function sol() {
        const setval = ex.offsetLeft;
        alert(`Offset Left including margin, padding, 
        scrollbar, and parent container's border: 
        ${setval}px`);
    }
    </script>
</body>

</html>

在事件處理程式中使用 offsetLeft

此示例顯示了在事件處理中使用 offsetLeft 屬性的用法。以下程式碼使用事件處理程式更改元素的位置並相應地更新 offsetLeft 值。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        #ex {
        position: relative;
        left: 50px;
        width: 200px;
        height: 100px;
        background-color: lightblue;
        transition: left 0.3s ease;  
        }
        #ofdis {     
        border: 1px solid black;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>offsetLeft Property</h2>
    <div id="ex">Example Element</div>
    <div id="ofdis">Offset Left: <span id="oflt"></span>
        pixels
    </div>
    
    <button id="mB" onclick="ml()">Move Element</button>
    
    <script>
        const ex = document.getElementById('ex');
        const od = document.getElementById('oflt');
        const mB = document.getElementById('mB');
    
        function updatelt() {
            od.textContent = ex.offsetLeft;
        }
    
        function ml() {
            ex.style.left = '150px';
            // Update offsetLeft value after movement
            updatelt(); 
            mB.textContent = 'Calculate offsetLeft'; 
            mB.setAttribute('onclick', 'cakculateleft()');  
        }
    
        function cakculateleft() {
            updatelt(); // Update offsetLeft valu  
        }
        //display of offsetLeft
        updatelt();
    </script>
</body>

</html>

支援的瀏覽器

屬性
offsetLeft	是	是	是	是	是

html_dom_element_reference.htm

列印頁面