How to use innerheight() Method in JQuery

In this article, I will explain use of innerheight() Method in JQuery.
  • 1844

JQuery CSS innerheight() Method

  • innerHeight( ) method gets the inner height for the first matched element.

  • innerHeight( ) method return height with include the border and padding.

Syntax

$(selector).innerheight()

Example

The following example shows how to innerheight() method in jquery.

<html>

<head>

<title>the title</title>

   <script type="text/javascript"

   src="JScript.js"></script>

   <script type="text/javascript" language="javascript">

       $(document).ready(function () {

           $("div").click(function () {

               var color = $(this).css("background-color");

               var height = $(this).innerHeight();

               $("#result").html("Inner Height is <span>" +

                        height + "</span>.");

               $("#result").css({ 'color': color,

                   'background-color': 'gray'

               });

               $("#result").height(height);

           });

         });

       </script>

   <style>

      #div1{ margin:10px;padding:12px;

             border:2px solid #666;

             width:60px;}

      #div2 { margin:15px;padding:5px;

              border:5px solid #666;

              width:60px;}

      #div3 { margin:20px;padding:4px;

              border:4px solid #666;

              width:60px;}

      #div4 { margin:5px;padding:3px;

              border:3px solid #666;

              width:60px;}

  </style>

</head>

<body>

<h2>innerheight() Method Exapmle</h2>

   <p>Click on any square for get inner Height:</p>

   <span id="result"> </span>

   <div id="div1" style="background-color:red;"></div>

   <div id="div2" style="background-color:Green;"></div>

   <div id="div3" style="background-color:Lime;"></div>

   <div id="div4" style="background-color:Maroon;"></div>

</body>

</html>

 

Output

 innerheight.jpg

Further Readings

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.