How to work with dimensions of HTML elements

All the HTML elements have properties that are used in Document Object Model programming to determine their dimensions. They are not part of original DOM specifications, but rather added later to define the dimensions of HTML elements on a web-page.

Offset Dimensions

These dimensions include height, width, padding, scrollbars and borders of an element in the web-page. However offset properties do not include element's margins. The below mentioned properties get or set the offset dimensions:

offsetHeight

The offsetHeight property returns the element's layout height, which includes vertical space including element’s height, horizontal bar, top and bottom border height.

Syntax for offsetHeight

var oHeight = element.offsetHeight;

offsetLeft

The offsetLeft property returns the number of pixels between the outside to inside left border of the element.

Syntax for offsetLeft

var oLeft = element.offsetLeft;

offsetTop

The offsetTop property returns the number of pixels between the outside to inside top border of the element.

Syntax for offsetTop

var oTop = element.offsetTop;

offsetWidth

The offsetWidth property returns the elements layout width which includes horizontal space taken by element including it’s width, width of vertical scrollbar, left and right border width.

Syntax for offsetWidth

var oWidth = element.offsetWidth;

Example of offsetHeight, offsetLeft, offsetTop, and offsetWidth properties

<!DOCTYPE html>
<html>

<style>
    button {
        background-color:#fff; padding:0.4em 0.5em 0.3em; border:2px groove #444; border-radius:4px;
    }
</style>

<body>
    <div id="myDiv" style="width:70%; height150px; padding:0.1em; border:3px solid black; font-size:smaller;">
        <p>Love Me Like You Do <br/> Blank Space<br/> One Last Night<br/> Stay With Me<br/> Thinking Out Loud</p>
    </div><br/>
    <button onclick="getDim()">Click here</button><br/>
    <p id="para"></p>
    <script>
        function getDim(){
            var offSet = document.getElementById("myDiv");
            document.getElementById("para").innerHTML = "offsetHeight: " + offSet.offsetHeight + "<br />";
            document.getElementById("para").innerHTML += "offsetWidth: " + offSet.offsetWidth + "<br />";
            document.getElementById("para").innerHTML += "offsetLeft: " + offSet.offsetLeft + "<br />";
            document.getElementById("para").innerHTML += "offsetTop: " + offSet.offsetTop + "<br />";
        }
    </script>
</body>

</html>

Client Dimensions

These dimensions are used to calculate (or set) the space between element’s content and it’s padding. The properties determining client dimensions are:

clientWidth

The clientWidth property returns the width of the content area along with it's left and right padding.

Syntax for clientWidth

var cWidth = element.clientWidth;

clientHeight

The clientHeight property returns the height of the content area along with it's top and bottom padding.

Syntax for clientHeight

var cHeight = element.clientHeight;

In the example below the offsetHeight and offsetWidth include the margin size, whereas clientHeight and clientWidth property do not.

Example of offsetHeight, offsetWidth, clientHeight, and clientWidth properties

<!DOCTYPE html>
<html>

<style>
    button {
        background-color:#fff; padding:0.4em 0.5em 0.3em; border:2px groove #444; border-radius:4px;
    }
</style>

<body>
    <div id="myDiv" style="width:70%; height150px; padding:0.1em; border:3px solid black; font-size:smaller;">
        <p>Love Me Like You Do <br/> Blank Space<br/> One Last Night<br/> Stay With Me<br/> Thinking Out Loud </p>
    </div><br/>
    <button onclick="getDim()">Click here</button><br/>
    <p id="para"></p>
    <script>
        function getDim(){
            var offSet = document.getElementById("myDiv");
            document.getElementById("para").innerHTML += "clientWidth: " + offSet.clientWidth + "<br />";
            document.getElementById("para").innerHTML += "clientHeight: " + offSet.clientHeight + "<br />";
            document.getElementById("para").innerHTML += "offsetHeight: " + offSet.offsetHeight + "<br />";
            document.getElementById("para").innerHTML += "offsetWidth: " + offSet.offsetWidth + "<br />";			
        }
    </script>
</body>

</html>

Scroll Dimensions

These properties are used to provide information on element's scrolling bars settings. Elements can be made to scroll using overflow property of CSS.

scrollHeight

The scrollHeight property determines total height of the content without scrollbars.

Syntax for scrollHeight

var sHeight = element.scrollHeight;

scrollLeft

The scrollLeft property returns the number of pixels hidden in the left of the content area.

Syntax for scrollLeft

var sLeft = element.scrollLeft;

scrollTop

The scrollTop property returns the number of pixels hidden in the top of the content area.

Syntax for scrollTop

var sTop = element.scrollTop;

scrollWidth

The scrollWidth property determines total width of the content without scrollbars.

Syntax for scrollWidth

var sWidth = element.scrollWidth;

Example of scrollHeight, scrollWidth, scrollHeight, and scrollWidth properties

<!DOCTYPE html>
<html>

<style>
    button {
        background-color:#fff; padding:0.4em 0.5em 0.3em; border:2px groove #444; border-radius:4px;
    }
</style>

<body>
    <div id="myDiv" style="width:70%; height150px; padding:0.1em; border:3px solid black; font-size:smaller; overflow:scroll;">
        <p>Love Me Like You Do <br/> Blank Space<br/> One Last Night<br/> Stay With Me<br/> Thinking Out Loud </p>
    </div><br/>
    <button onclick="getDim()">Click here</button><br/>
    <p id="para"></p>
    <script>
        function getDim(){
            var scroll = document.getElementById("myDiv");
            document.getElementById("para").innerHTML = "scrollHeight: " + scroll.scrollHeight + "<br />";
            document.getElementById("para").innerHTML += "scrollWidth: " + scroll.scrollWidth + "<br />";
            document.getElementById("para").innerHTML += "scrollTop: " + scroll.scrollTop + "<br />";
            document.getElementById("para").innerHTML += "scrollLeft: " + scroll.scrollWidth + "<br />";
        }
    </script>
</body>

</html>

›› go to examples ››