Javascript - Determine the height of an HTML element

August 2017

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>

Related


Published by jak58. Latest update on November 8, 2012 at 03:49 PM by Jeff.
This document, titled "Javascript - Determine the height of an HTML element," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).