Ask a question »

Javascript - Determine the height of an HTML element

July 2015

Javascript is used across the world by programmers to create rich and dynamic web pages. There are various in-built methods available that enable programmers to customize their web pages independent of the type of browser in use. Two such methods are offsetHeight and pixelHeight which are used to determine the height of an HTML element. HTML elements are fundamental blocks of any type of web page. Once the programmer can determine the height of these elements in a dynamic way; the result is a web page that adjusts itself automatically irrespective of any type of web browser that the user chooses.

To determine the height of an HTML block using JavaScript, independently from the type of browser used, there are two methods:
  • element.offsetHeight
  • element.style.pixelHeight



The following code implements the above methods, allowing you to determine the height of a block HTML regardless of the browser used:

<script type="text/javascript">    
<!--    
var divHeight;    
var obj = document.getElementById('id_element');    

if(obj.offsetHeight)          {divHeight=obj.offsetHeight;}    
else if(obj.style.pixelHeight){divHeight=obj.style.pixelHeight;}    
//-->    
</script>
For unlimited offline reading, you can download this article for free in PDF format:
Javascript-determine-the-height-of-an-html-element.pdf

See also

In the same category

Original article published by Jeff. Translated by jak58. - Latest update by Jeff
This document entitled « Javascript - Determine the height of an HTML element » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.