Thuộc tính hàng đầu HTML DOM client

Thuộc tính HTML DOM clientTop trả về chiều rộng của đường viền trên cùng của một phần tử tính bằng pixel. Nó là một tài sản chỉ đọc. Lề trên cùng hoặc phần đệm trên cùng của một phần tử không được thuộc tính này bao gồm.

Cú pháp

Sau đây là cú pháp cho thuộc tính clientTop -

element.clientTop;

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính 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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính hàng đầu HTML DOM client

Khi nhấp vào RỘNG RÃI HÀNG ĐẦU -

Thuộc tính hàng đầu HTML DOM client

Trong ví dụ trên -

Chúng tôi đã tạo một div với id “styleDIV” và áp dụng một kiểu cho nó bằng cách sử dụng id của nó.

#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>

Sau đó, chúng tôi đã tạo một nút TOP WIDTH sẽ thực thi phương thức topWidth () khi nhấp vào -

<button>TOP WIDTH</button>

TopWidth () nhận phần tử

bằng cách sử dụng phương thức getElementById () và gán nó cho biến x. Sau đó, sử dụng thuộc tính clientTop trên

, chúng ta nhận được chiều rộng đường viền trên cùng của nó tính bằng pixel và sau khi thêm một số văn bản sẽ gán nó cho biến txt. Sau đó, văn bản bên trong txt được hiển thị bên trong đoạn văn với id “Sample” bằng cách sử dụng thuộc tính innerHTML và gán biến txt cho nó -

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