HTML - DOM 元素 clientLeft 屬性

clientLeft 屬性用於獲取元素左邊框的寬度，不包括左填充或左外邊距。它對於訪問和確定元素邊框的精確大小非常有用，並且是一個只讀屬性。

語法

element.clientLeft;

返回值

返回元素左邊框的寬度，以畫素為單位。

HTML DOM 元素 'clientLeft' 屬性示例

以下是一些示例，說明了在各種場景中使用 clientLeft 屬性的情況。

獲取元素的左邊框寬度

此示例顯示瞭如何檢索 ID 為“MyElement”的元素，並以畫素為單位檢索其計算出的左邊框寬度。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        #myElement {
            width: 200px;
            height: 100px;
            border: 10px solid black;
            border-left: 30px solid red;
        }
        #result {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="myElement">Example Element</div>
    <div id="result"></div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var element = document.getElementById("myElement");
            var leftBorderWidth = element.clientLeft;
            var resultElement = document.getElementById("result");
            resultElement.textContent =
                "Left border width of #myElement: " +
                leftBorderWidth + " pixels";
        });
    </script>
</body>

</html>

獲取最後一個 div 元素的左邊框寬度

此示例使用 clientLeft 屬性檢查最後一個<div> 元素的計算出的左邊框寬度。我們也可以使用borderLeftWidth 屬性來獲取元素的左邊框寬度。

<!DOCTYPE html>
<html lang="en">

<head> 
    <style>
        .example-div {
            width: 200px;
            height: 100px;
            border: 10px solid black;
            margin-bottom: 10px;
        }
        .border-width {
            color: green;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="example-div">First div element</div>
    <div class="example-div">Second div element</div>
    <div class="example-div" id="lastDiv">
    Third div element (last)</div>
    <div id="result">
        Left border width of the last will be displayed here:
    <span id="spn"></span>
    </div>

    <script>
        document.addEventListener
        ("DOMContentLoaded", function() {

        var lastDiv = document.getElementById("lastDiv");
        var leftBorderWidth = lastDiv.clientLeft;
        var spnEle = 
            document.getElementById("spn");
            spnEle.innerHTML = leftBorderWidth + "px"
        });
    </script>
</body>

</html>

檢索側邊欄元素的寬度

此示例使用其 ID "sidebar" 顯示側邊欄元素的計算寬度，動態調整側邊欄及其相應的寬度，然後使用 clientLeft 屬性在視口中準確顯示此寬度。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .sidebar {
            width: 250px;
            height: 100vh;
            position: fixed;
            top: 0;
            background-color: #333;
            color: white;
            padding: 20px;
            box-sizing: border-box;
            border-right: 10px solid #666;  
            overflow-x: hidden;
            resize: horizontal;
            z-index: 1;
        }
        .content {
            margin-left: 260px;
            } 
    </style>
</head>

<body>
    <div class="sidebar" id="sidebar">
        <h2>Sidebar</h2>
        <p>This is a resizable sidebar element.</p>
    </div>
    <div class="content">
        <h1>Main Content</h1>
        <p>Content goes here...</p>
        <div id="result">
        Width of the sidebar will be displayed here:
        <span id="spn"></span></div>
    </div>

    <script>
        document.addEventListener
        ("DOMContentLoaded", function() {
            var sidebar = document.getElementById("sidebar");
            var resultElement =
            document.getElementById("result");

            // Define a function to update sidebar width
            function updateSidebarWidth() {
                var sidebarWidth = sidebar.offsetWidth;
                var spnEle = 
                document.getElementById("spn");
                spnEle.innerHTML = sidebarWidth + "px"
            } 
            
            // Call the function when page loaded
            updateSidebarWidth();
            
            // Call the function when resize happen
            window.addEventListener
            ("resize",updateSidebarWidth);
            sidebar.addEventListener
            ("mousemove", function() {
                updateSidebarWidth();
            });
        });
    </script>
</body>

</html>

支援的瀏覽器

屬性
clientLeft	是 1	是 12	是 1	是 3	是 9

html_dom_element_reference.htm

列印頁面