Element clientWidth Property - Javascript DOM

Javascript examples for DOM:Element clientWidth

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

Description

The clientWidth property returns the viewable width 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 width 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 {/*from  ww w.j  a  va2  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">
  This is a test. This is a test. This is a test.
  This is a test. This is a test. This is a test.
  This is a test. This is a test. This is a 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