Javascript DOM HTML Element scrollWidth Property get

Introduction

Using padding, border, scrollbar and margin to show how this affects the scrollWidth and scrollHeight property:

Click the button to get the entire height and width of div.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#content {/*  www  . j av a  2  s  . co m*/
  height: 100px;
  width: 100px;
  background-color: coral;
  padding: 15px;
  border: 10px solid black;
  margin: 10px;
  overflow: scroll;
}
</style>
</head>
<body>

<button onclick="myFunction()">Test</button>

<div id="content">Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..Some content..</div>

<p id="demo"></p>

<script>
function myFunction() {
  var elmnt = document.getElementById("content");
  var y = elmnt.scrollHeight;
  var x = elmnt.scrollWidth;
  document.getElementById ("demo").innerHTML = "Height: " + y + "px<br>Width: " + x + "px";
}
</script>

</body>
</html>



PreviousNext

Related