Element scrollHeight Property - Using padding, border, scrollbar and margin to show how this affects the scrollWidth and scrollHeight property: - Javascript DOM

Javascript examples for DOM:Element scrollHeight

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

Description

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#content {//from  ww w  .j  a  va2s  .c  o 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">
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.
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.
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.
This is a test. This is a test. This is a test.
</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>

Related Tutorials