Element scrollWidth Property - Javascript DOM

Javascript examples for DOM:Element scrollWidth

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

Description

The scrollWidth property returns the width of an element in pixels, including padding, but not the border, scrollbar or margin.

This property is read-only.

Return Value

A Number, representing the width of an element, in pixels

The following code shows how to get the entire height and width of an element, including padding:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#content {//from   ww w.  ja va2 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