Javascript Get Height of Div onclick

Updated on 23 Mar 2012,
Published on 27 Jun 2008

Javascript DOM document object provides the getElementById method that can get the height of the Div element using its onclick event. There are two types of properties to get the height of <div> tag. offsetHeight and clientHeight are the properties that can be accessed using getElementId of the javascript document object.

JavaScript DOM Examples:

You can see the live samples and examples of JavaScript DOM from the following links:

Difference between offsetHeight and clientHeight property

Both properties have a difference in the value returned as the height of the specified <div> tag:

offsetHeight

offsetHeight property of getElementById method gets the height of the div element that is specified in the CSS class style.

clientHeight

clientHeight property of getElementById method gets the inner absolute height of the div element. That means if overflow CSS property of the div element is defined with value scroll then clientHeight will return the height of the div approximately 16 pixels less than the offsetHeight i.e. value of CSS height property.

Javascript Syntax to get Height of Div

document.getElementById("id").clientHeight

document.getElementById("id").offsetHeight

Javascript Code to get Height of Div onclick

<html>
<head>
    <title>Javascript Get Div clientHeight and offsetHeight</title>
    <style type="text/css">
        #div1 {
            width: 200px;
            height: 100px;
            overflow: scroll;
        }
    </style>

    <script language="javascript" type="text/javascript">
    <![CDATA[
        function getDivHeight() {
            alert("Client Height:  " 
                  + document.getElementById("div1").clientHeight);

            alert("Offset Height:  " 
                  + document.getElementById("div1").offsetHeight);
        }
    ]]>
    </script>
</head>
<body>
    <center>
        <div id="div1">
            Get Div Height using Javscript function. Javascript DOM document can access the
            height of HTML Div element dynamically.
        </div>
        <br />
        <input type="button" 
                value="Get Div Height" 
                onclick="getDivHeight()" />
    </center>
</body>
</html>

Similarly you can get the width of Div tag, see example here: Javascript Get Width of Div onclick. You can use both values i.e. width and height to dynamically expand the size of div tag.

Output:

You can see the output of above discussed codes from the following link:

Get Div clientHeight and offsetHeight

Continue to next tutorial: Javascript Get Width of Div onclick to learn how to retrieve the width of HTML div element programatically.

6 Responses to "Javascript Get Height of Div onclick"
Ryan Brown
This is an excellent tip! Exactly what I was looking for.

Is it also possible to set the div height using this DOM?
Laurent Coene
Any idea why offsetHeight and clientHeight do not take tables into account when in a div?
Example:
<div id="myDiv">
<table id="myTable">
<tr><td>Hi!</td></tr>
</table>
</div>
...
document.getElementById("myDiv").clientHeight returns 0!! (same for offsetHeight)
magiel
As you can see from the example

*Element.height
*Element.heightoffset
*Element.clientHeight
*Element.style.height

don't return me the actual height after changing the content of a div. I just cannot believe it is impossible not to be able to retrieve the height after the browser processed the HTML. Help would be appreciated in any way. Thanks in advance.

{CODE()}<html>
<head>
<script type="text/javascript">
function getElementFromEvent(e)
{
var targetElement
if (!e) var e = window.event
if (e.target) targetElement = e.target
else if (e.srcElement) targetElement = e.srcElement
if (targetElement.nodeType == 3) // deal with Safari bug
targetElement = targetElement.parentNode
getElementProperties(targetElement);
}

function getElementProperties(targetElement)
{
targetClass=targetElement.className;
if (!targetClass=="controls"||targetClass=="") {
targetTagType=targetElement.tagName;
targetId=targetElement.id;
targetHeight=targetElement.height;
targetOffsetHeight=targetElement.heightoffset;
targetClientHeight=targetElement.clientHeight;
targetStyleHeight=targetElement.style.height;
targetComputedStyleHeight=getStyle(targetId,"height");

alert("You clicked on a " + targetTagType + " element.\nId = " + targetId + "\n\nHeight = " + targetHeight + "\nHeight Offset = " + targetOffsetHeight + "\nClient Height = " + targetClientHeight + "\nStyle Height = " + targetStyleHeight + "\nComputed Style Height = " + targetComputedStyleHeight)
}
}

function getStyle(targetElement,styleProp)
{
if (targetElement) {
if (targetElement.currentStyle) return targetElement.currentStyle[styleProp];
else if (window.getComputedStyle) return document.defaultView.getComputedStyle(targetElement,null).getPropertyValue(styleProp);
}
}

var gv_NrOfLines=0;

function addTekst()
{
gv_NrOfLines+=1;
updateValue(document.getElementById("chkAddUp").checked);
}

function removeTekst()
{
gv_NrOfLines-=1;
if (gv_NrOfLines<0) gv_NrOfLines = 0;
updateValue(document.getElementById("chkAddUp").checked);
}

function updateValue(addOnTop)
{
var currentLineTekst = "Some new Text.";
document.getElementById("divId").innerHTML="";
if (addOnTop) {
for (lineIndex=gv_NrOfLines;lineIndex>0;lineIndex--)
{
document.getElementById("divId").innerHTML+="("+lineIndex+" of "+(gv_NrOfLines-1)+") "+currentLineTekst+"<br>";
}
}
else
{
for (lineIndex=0;lineIndex<gv_NrOfLines;lineIndex++) {
document.getElementById("divId").innerHTML+="("+lineIndex+" of "+(gv_NrOfLines-1)+") "+currentLineTekst+"<br>";
}
}
}
</script>
</head>

<body onmousedown="getElementFromEvent(event)">

<h2>This is a header</h2>
<p id="pId">This is a paragraph. Click on this paragraph, the header, the div or the image to see different height property values.</p>
<input id="btnaddTekst" class="controls" value="add Tekst" type="button" onMouseDown="addTekst();">
<input id="btnremoveTekst" class="controls" value="remove Tekst" type="button" onMouseDown="removeTekst();">
<input id="chkAddUp" class="controls" type="checkbox" checked="checked">Add on Top/Bottum
<div id="divId">Some Text in a div with id = divId</div>
<p><img id="imgId" alt="Add youre image."></p>

</body>
</html>{CODE}
Ezineasp.net
Hi Magiel You are using heightoffset property name to get the dynamically increasing height of the associated div element. Its offsetHeight instead. Try it. Good Luck :)
Magiel
Thanks for the quick reply, AND the solution! I am very happy!

With kind regards,
Hy Thankk you for this tutorial. I used "document.getElementById("id").clientHeight" found here :)
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email