Thuộc tính HTML DOM clientHeight

Thuộc tính HTML DOM clientHeight được dùng để lấy chiều cao có thể nhìn thấy của một phần tử HTML. Chiều cao này bao gồm padding nhưng loại trừ bất kỳ 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 ra khỏi phần tử.

Nó có thể được tính toán như sau:

CSS height + CSS padding – border – scrollbar(ngang) – margins

Cú pháp

Cú pháp sau đây dùng cho thuộc tính clientHeight:

element.clientHeight

Ví dụ

Hãy xem 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>Nhấn nút bên dưới để lấy chiều cao của div, bao gồm padding.</p> <button onclick="heightDiv()">LẤY CHIỀU CAO</button> <div id="styleDIV"> <b>Một div mẫu</b> </div> <p id="Sample"></p> <script> function heightDiv() { var x = document.getElementById("styleDIV"); var txt = "Chiều cao bao gồm padding = " + x.clientHeight; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>

Kết quả

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

Khi nhấn nút LẤY CHIỀU CAO:

Trong ví dụ trên:

Chúng ta đã tạo một div với id "styleDIV" và có kiểu dáng được áp dụng cho nó bằ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>Một div mẫu</b> </div>

Chúng ta đã tạo nút LẤY CHIỀU CAO sẽ thực thi phương thức heightDiv() khi nhấp:

<button onclick="heightDiv()">LẤY CHIỀU CAO</button>

Phương thức heightDiv() lấy phần tử <div> bằng phương thức getElementById() và gán nó cho biến x. Sau đó sử dụng thuộc tính clientHeight trên <div>, chúng ta lấy chiều cao của nó và sau khi nối thêm một số văn bản gán nó cho biến txt. Văn bản bên trong txt sau đó được hiển thị bên trong đoạn văn bằng thuộc tính innerHTML trên đoạn văn và gán biến txt cho nó:

function heightDiv() { var x = document.getElementById("styleDIV"); var txt = "Chiều cao bao gồm padding = " + x.clientHeight; document.getElementById("Sample").innerHTML = txt; }