Javascript - Determine the height of an HTML element

Ask a question
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>
Jean-François Pillou

CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jeff Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.

Learn more about the CCM team