HTML - DOM 元素 clientTop 屬性

clientTop 屬性提供元素頂部邊框的寬度，不包括填充和邊距，以畫素為單位。它有助於在網頁佈局中獲取準確的元素位置和大小計算。

語法

element.clientTop;

返回值

此屬性返回一個數字（以畫素為單位），表示元素的可視寬度。

HTML DOM 元素“clientTop”屬性示例

以下是一些說明在各種場景中使用 clientTop 屬性的示例。

檢索元素的頂部邊框寬度

此示例檢索 ID 為“myElement”的元素，並訪問其 clientTop 屬性以確定其頂部邊框的寬度（以畫素為單位）。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #myElement {
            width: 190px;
            height: 90px;
            padding: 25px;
            border-top: 9px solid black;
            border-left: 9px solid red;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">clientTop Property
    <br><br>Retrieving Top Border Width of an Element
    </h3>
    <div id="myElement">Example Element</div>
    <p>
        Click the button to retrieve the top 
        border width of the element:
    </p>

    <button onclick="getTopBorderWidth()">
        Get Top Border Width
    </button>

    <p id="result">
    </p>
    <script>
        function getTopBorderWidth() { 

            var element = document.getElementById("myElement");
            var topBorderWidth = element.clientTop; 
            var resultElement = 
            document.getElementById("result");
            resultElement.innerHTML = 
            "Top border width of #myElement: "
            + topBorderWidth + " pixels";
        }
    </script>
</body>

</html>

檢索側邊欄元素的頂部邊框寬度

此示例以 ID 為“sidebar”的元素為目標，然後訪問其 clientTop 屬性以獲取其頂部邊框的寬度（以畫素為單位）。

 
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .sidebar {
            width: 250px; 
            position: fixed; 
            background-color: #333;
            color: white; 
            border-top: 10px solid black;  
            resize: horizontal; 
            overflow-x: hidden; 
            z-index: 1; 
        }
        .content {
            margin-left: 260px;
        }
    </style>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">clientTop Property
    <br><br>Retrieving Top Border Width of a Sidebar Element
    </h3>
    <div class="sidebar" id="sidebar">
        <h2>Sidebar</h2>
        <p>This is a resizable sidebar element.</p>
    </div>

    <div class="content">
        <h2>Main Content</h2>
        <p>Content goes here...</p>

        <button onclick="getTopBorderWidth()">
            Get Top Border Width
        </button>

        <div id="result">
            Top border width of the sidebar will be displayed 
            here:<span id = "spn"></span>
        </div>
    </div>
    <script>
            // Function to get the top border width 
            function getTopBorderWidth() {

            var sidebar = document.getElementById("sidebar");
            var topBorderWidth = sidebar.clientTop;
            var spnEle = document.getElementById("spn");
            spnEle.innerHTML =+ topBorderWidth + " px";
            }
    </script>
</body>

</html>

查詢第一個標題元素的頂部邊框寬度

此示例顯示如何查詢標題元素的頂部邊框寬度。它包含一個按鈕，該按鈕檢索並顯示第一個<h1> 元素頂部邊框的計算寬度（以畫素為單位）。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h2{
        border-top: 10px solid black;
        padding: 10px;
        }
    </style>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">clientTop Property
    <br><br>Finding Top Border Width of the First Header Element
    </h3>
    <p>Click the button to find the top border width of 
        the first header element
    </p>

    <button onclick="getTopBorderWidth()">
        Find Top Border Width
    </button>

    <p id="result">
        Top border width of the first header will 
        be displayed here :
    </p>
    <script>
        function getTopBorderWidth() {

        var firstHeader = document.querySelector("h2");
        var topBorderWidth = firstHeader.clientTop;
        var resultElement =document.getElementById("result");
        resultElement.textContent = 
        "Top border width of the first header: " + 
        topBorderWidth + " pixels";
        }
    </script>
</body>

</html>

支援的瀏覽器

屬性
clientTop	是	是	是	是	是

html_dom_element_reference.htm

列印頁面