Element offsetWidth Property - Javascript DOM

Javascript examples for DOM:Element offsetWidth

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

Description

The offsetWidth property returns the viewable width of an element in pixels, including padding, border and scrollbar, but not the margin.

This property is read-only.

Return Value

A Number, representing the viewable width of an element in pixels, including padding, border and scrollbar

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from   w  w  w .ja  va  2s  .  com
    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 and border: " + elmnt.offsetHeight + "px<br>";
    txt += "Width including padding and border: " + elmnt.offsetWidth + "px";
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Related Tutorials