Element scrollWidth Property - Return the scrollHeight and scrollWidth of an element and then set its height and width to the values returned from scrollHeight and scrollWidth: - Javascript DOM

Javascript examples for DOM:Element scrollWidth

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

Description

Element scrollWidth Property - Return the scrollHeight and scrollWidth of an element and then set its height and width to the values returned from scrollHeight and scrollWidth:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#content {//from w  w  w . ja  v a 2  s  . 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="getFunction()">Get scrollHeight and scrollWidth</button>

<button onclick="setFunction()">Set height and width</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. </div>

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

<script>
var elmnt = document.getElementById("content");

function getFunction() {
    document.getElementById("demo").innerHTML = "Height: " + elmnt.scrollHeight + "px" + "<br>Width: " + elmnt.scrollWidth + "px" ;
}

function setFunction() {
    elmnt.style.height = elmnt.scrollHeight + "px";
    elmnt.style.width = elmnt.scrollWidth + "px";
}
</script>

</body>
</html>

Related Tutorials