Element clientHeight Property - Javascript DOM

Javascript examples for DOM:Element clientHeight

  1. HOME
  2. Javascript
  3. DOM
  4. Element clientHeight

Description

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

This property is read-only.

Return Value

A Number, representing the viewable height of an element in pixels, including padding

The following code shows how to get the height and width of a <div> element, including padding:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {// www .  j  ava 2  s  .  c o m
    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">
  test test
  <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>

Related Tutorials