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

打印页面