Get the height of the hidden element in jQuery Last Updated : 06 Nov, 2019 Comments Improve Suggest changes Like Article Like Report An HTML element can be hidden with the help of .hide() jQuery function or we can hide easily by making visibility equals hidden in CSS. We can easily find the height of this hidden element in jQuery. There are two kinds of height that are defined with the every HTML element i.e, innerHeight and the outerHeight of the element: innerHeight: This height is considered when the width of the border is not considered for the selected element. outerHeight: This height is considered when the width of the border is considered for the selected element. Example-1: This example show how to calculate innerHeight of the hidden element. html <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function() { $("#btn1").click(function() { var demo = $("div").innerHeight(); $("#demo").text(demo); }); }); </script> <style> div { width: 310px; height: 80px; font-weight: bold; color: green; font-size: 25px; border: 1px solid green; visibility: hidden; } body { border: 1px solid green; padding: 10px; width: 300px; } </style> </head> <body> <div> </div> <p id="demo"> Here the height of the hidden "div" element will appear. </p> <button id="btn1">Submit</button> </body> </html> Output: Before Click: After Click: Here, border width will not be added to the result. Example-2: This example show how to calculate outerHeight of the hidden element. html <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function() { $("#btn1").click(function() { var demo = $("div").outerHeight(); $("#demo").text(demo); }); }); </script> <style> div { width: 310px; height: 80px; font-weight: bold; color: green; font-size: 25px; border: 1px solid green; visibility: hidden; } body { border: 1px solid green; padding: 10px; width: 300px; } </style> </head> <body> <div> </div> <p id="demo"> Here the height of the hidden "div" element will appear. </p> <button id="btn1">Submit</button> </body> </html> Output: Before Click: After Click: Here, border width will be added to the result. Comment More infoAdvertise with us Next Article How to Get the Width of Hidden Element in jQuery? S Sruti Rai Follow Improve Article Tags : Web Technologies JQuery Similar Reads How to Get the Width of Hidden Element in jQuery? An HTML element can be hidden with the help of the .hide() jQuery function or we can hide easily by making visibility equals hidden in CSS. We can easily find the width of this hidden element in jQuery.Two kinds of width are defined with every HTML element i.e, innerWidth and the outerWidth of the e 3 min read How to Get the Width of Hidden Element in jQuery? An HTML element can be hidden with the help of the .hide() jQuery function or we can hide easily by making visibility equals hidden in CSS. We can easily find the width of this hidden element in jQuery.Two kinds of width are defined with every HTML element i.e, innerWidth and the outerWidth of the e 3 min read How to get the width and height of an element in jQuery ? In this article, we will find the width and height of an element in jQuery. There are three ways available in jQuery that we can use to find the height and width of an element. Table of Content Using the width() and height() methodsUsing the innerWidth() and innerHeight() methodsUsing the outerWidth 3 min read How to get the rendered height of an element ? To get the height of an element, there are five common methods in JavaScript. Lets see the differences between each and when they should be used. Only the last method gives the correct rendered height instead of the layout height. style.height jQuery( height, innerHeight, outerHeight ) clientHeight, 10 min read How to get the height of a div using jQuery ? In this article, we will learn how to get the height of a div using jQuery. In jQuery, height method is used to get the height of any element in HTML. The height method sets and returns the height of the HTML elements. Method 1: The height() method returns the first matched element's height, But the 3 min read How to get the height of device screen in JavaScript ? Given an HTML document which is running on a device. The task is to find the height of the working screen device using JavaScript. Prerequisite - How to get the width of device screen in JavaScript ? Example 1: This example uses window.innerHeight property to get the height of the device screen. The 2 min read Like