HTML DOM clientTop 属性

HTML DOM clientTop 属性返回元素上边框的宽度(以像素为单位)。它是一个只读属性。元素的上边距或上内边距不包含在该属性中。

语法

以下是 clientTop 属性的语法 −

element.clientTop;

示例

让我们看一个 clientTop 属性的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
#styleDiv {
   height: 250px;
   font-size:35px;
   text-align:center;
   width: 400px;
   padding: 10px;
   margin: 15px;
   border-top: 15px solid blue;
   background-color: lightgreen;
}
</style>
</head>
<body>
<p>Click the below button to get the div top border width in pixels </p>
<button onclick="topWidth()">TOP WIDTH</button>
<div id="styleDiv">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
   function topWidth() {
      var x = document.getElementById("styleDiv");
      var txt = "Border top width: " + x.clientTop + "px";
      document.getElementById("Sample").innerHTML = txt;
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击顶部宽度 −

在上面的例子中 −

我们创建了一个 id 为 “styleDIV” 的 div，并使用其 id 为其应用了样式。

#styleDiv {
   height: 250px;
   font-size:35px;
   text-align:center;
   width: 400px;
   padding: 10px;
   margin: 15px;
   border-top: 15px solid blue;
   background-color: lightgreen;
}

div −

<div id="styleDiv">
<b>A sample div</b>
</div>

然后，我们创建了一个按钮 TOP WIDTH，当点击 − 时，它将执行 topWidth() 方法。

<button>TOP WIDTH</button>

topWidth() 使用 getElementById() 方法获取 <div> 元素，并将其赋值给变量 x。然后，使用 <div> 上的 clientTop 属性，我们获取其顶部边框宽度(以像素为单位)，并在附加一些文本后，将其赋值给变量 txt。然后，使用 innerHTML 属性并将 txt 变量赋值给变量 txt，txt 中的文本将显示在 id 为"Sample"的段落内 −

function topWidth() {
   var x = document.getElementById("styleDiv");
   var txt = "Border top width: " + x.clientTop + "px";
   document.getElementById("Sample").innerHTML = txt;
}

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/