ไคลเอ็นต์ HTML DOM คุณสมบัติยอดนิยม

คุณสมบัติ 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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

ไคลเอ็นต์ HTML DOM คุณสมบัติยอดนิยม

เมื่อคลิก TOP WIDTH -

ไคลเอ็นต์ HTML DOM คุณสมบัติยอดนิยม

ในตัวอย่างข้างต้น −

เราได้สร้าง div ด้วย id “styleDIV” และมีสไตล์ที่ใช้กับมันโดยใช้ 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() และกำหนดให้กับตัวแปร x จากนั้นใช้คุณสมบัติ clientTop บน

เราได้ความกว้างขอบด้านบนเป็นพิกเซลและหลังจากต่อท้ายข้อความบางส่วนจะกำหนดให้กับตัวแปร txt ข้อความภายใน txt จะแสดงในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML และกำหนดตัวแปร txt ให้กับมัน -

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