Javascript DOM HTML Element scrollHeight Property with scrollbar

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 {/*from   ww w  .j a v a2s .  com*/
  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