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

打印页面