Thuộc tính HTML DOM clientHeight được sử dụng để lấy chiều cao có thể xem được của một phần tử HTML. Chiều cao này bao gồm phần đệm nhưng không bao gồm bất kỳ đường viền, thanh cuộn và lề nào. Nó sẽ chỉ trả về chiều cao của phần tử ngay cả khi nội dung tràn khỏi phần tử.
Nó có thể được tính là -
CSS height+ CSS padding – border –scrollbar(horizontal) – margins
Cú pháp
Sau đây là cú pháp cho thuộc tính clientHeight -
element.clientHeight
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính HTML DOM clientHeight -
<!DOCTYPE html>
<html>
<head>
<style>
#styleDIV {
height: 250px;
padding: 10px;
margin: 15px;
border: 2px solid blue;
background-color: lightgreen;
text-align:center;
}
</style>
</head>
<body>
<p>Click the below button to get the height of the div, including padding.</p>
<button onclick="heightDiv()">GET HEIGHT</button>
<div id="styleDIV">
<b>A sample div</b>
</div>
<p id="Sample"></p>
<script>
function heightDiv() {
var x = document.getElementById("styleDIV");
var txt = "Height including padding = " + x.clientHeight ;
document.getElementById("Sample").innerHTML = txt;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút NHẬN CHIỀU CAO -
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;
padding: 10px;
margin: 15px;
border: 2px solid blue;
background-color: lightgreen;
text-align:center;
}
<div id="styleDIV">
<b>A sample div</b>
</div> Sau đó, chúng tôi đã tạo một nút GET HEIGHT sẽ thực thi phương thức heightDiv () khi nhấp chuột -
<button onclick="heightDiv()">GET HEIGHT</button>
HeightDiv () nhận phần tử
function heightDiv() {
var x = document.getElementById("styleDIV");
var txt = "Height including padding = " + x.clientHeight ;
document.getElementById("Sample").innerHTML = txt;
}