Javascript DOM HTML Element clientHeight Property

Introduction

The clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.

Get the height and width of a <div> element, including padding:

Click the button to get the height and width of div, including padding using both clientHeight and clientWidth.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from w  w  w .j  a v a 2s .  c om
  height: 250px;
  width: 400px;
  padding: 10px;
  margin: 15px;
  border: 5px solid red;
  background-color: lightblue;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <b>Information about this div:</b><br>
  Height: 250px<br>
  Width: 400px<br>
  padding: 10px<br>
  margin: 15px<br>
  border: 5px<br>
  <p id="demo"></p>
</div>

<script>
function myFunction() {
  var elmnt = document.getElementById("myDIV");
  var txt = "Height including padding: " + elmnt.clientHeight + "px<br>";
  txt += "Width including padding: " + elmnt.clientWidth + "px";
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

If the element's content is taller than the actual height of the element, this property will only return the height that is visible.

Use the offsetHeight and offsetWidth properties to return the viewable height and width of an element, including padding, border and scrollbar.

To add scrollbar to an element, use the CSS overflow property.

This property is read-only.

The clientHeight property returns a Number representing the viewable height of an element in pixels, including padding.




PreviousNext

Related