HTML | DOM clientTop 属性(1)

📌 相关文章

📜 HTML | DOM clientTop 属性(1)

📅 最后修改于: 2023-12-03 15:31:11.695000 🧑 作者: Mango

HTML | DOM clientTop 属性

HTML | DOM clientTop 属性返回的是元素上边框（border-top）以外区域的高度，单位是像素（px）。

语法

element.clientTop

返回值

clientTop 属性返回的是数值，在没有边框的情况下为 0。

适用性

clientTop 属性适用于有效地获取元素的位置和大小。当需要使用元素的边缘而非元素内容时，可使用 clientTop 属性。

示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>clientTop 示例</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border: 2px solid black;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">Hello World!</div>
    <script>
      var div = document.getElementById("myDiv");
      console.log("clientTop 属性的值为：" + div.clientTop);
    </script>
  </body>
</html>

上面的示例中，创建了一个带有边框的 div 元素，并距离页面顶部有 50px 的距离。在 JavaScript 中，使用 getElementById 方法获取该元素，并通过 clientTop 属性获取元素的上边框（border-top）以外区域的高度。

注意事项

使用 clientTop 属性时，元素必须具有边框。
clientTop 属性的值不包括 margin 的高度，只包括 border 的高度。