.height()

In this chapter you will learn:

.height() (getter) Syntax and Description
.height(value) (setter) Syntax and Description
How to get the whole document height
How to get the height for a tag
How to set the height for a div element
How to change the window height
Use click event to trigger height method
Chain height function with style setting

.height() (getter) Syntax and Description

.height() (getter) gets the current computed height for the first element in the set of matched elements. .height() (getter) has no parameter and its return value is the height of the element in pixels.

.height() returns a unitless pixel value (for example, 400). .css('height') returns a value with units intact (for example, 400px).

.height(value) (setter) Syntax and Description

.height(value) (setter) sets the CSS height of each element in the set of matched elements.

value is an integer representing the number of pixels, or an integer with an optional unit of measure appended.

The return object is the jQuery object, for chaining purposes.

When calling .height(value), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit.

If a string is provided, any valid CSS measurement may be used for the height (such as 100px, 50%, or auto).

Get the whole document height

The following code gets document height.

<html><!--from   j  a  v  a 2 s  . c  o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             alert($(document).height());
        });
    </script>
    <style>
    div{
        width:200px;
        height:100px;
        overflow:auto;
    }
    h1 { width:1000px;height:1000px; }
  </style>

  </head>
  <body>
    <body>
       <div><h1>java2s.com</h1></div>
    </body>
</html>

Click to view the demo

Get the height for a tag

The following code gets the tag height.

<html><!--   ja v  a2 s . c o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             alert($("div").height());
        });
    </script>
    <style>
    div{
        width:200px;
        height:100px;
        overflow:auto;
    }
    h1 { width:1000px;height:1000px; }
  </style>

  </head>
  <body>
    <body>
       <div><h1>java2 s. com</h1></div>
    </body>
</html>

Click to view the demo

Set the height for a div element

The following code sets the height for a div element.

<html><!--from j av a  2s  .com-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("div").height(300);
        });
    </script>
    <style>
    div{
        width:200px;
        height:100px;
        overflow:auto;
    }
    h1 { width:1000px;height:1000px; }
  </style>

  </head>
  <body>
    <body>
       <div><h1>java2s.com</h1></div>
    </body>
</html>

Click to view the demo

Change the window height

Window height can be changed by using height method as well.

<html><!--   j a  va 2s .  c  o m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           alert($(window).height());
        });
    </script>
  </head>
  <body>
    <body>
         <p>Hello</p><p>java2s.com</p>
    </body>
</html>

Click to view the demo

Click to get the height

The following code passes the value from .height() to a function.

<html><!--from  j a  va 2  s  . c  om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             function showHeight(ele, h) {
               alert( h + "px.");
             }
             $("p").click(function () {
               showHeight("paragraph", $("p").height());
             });
        });
    </script>
  </head>
  <body>
    <body>
         <p>Hello</p><p>Paragraph</p>
    </body>
</html>

Click to view the demo

Chain height function with style setting

The following code chains the .height() function with .css() method.

<html><!-- j ava2s  .  c o m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                    $("div").one('click', function () {
                      $(this).height(30).css({cursor:"auto", backgroundColor:"green"});
                    });
        });
    </script>
    <style>
      div { 
         width:50px; 
         height:70px; 
         float:left; 
         margin:5px;
         background:rgb(255,140,0); 
         cursor:pointer; 
       }
    </style>
  </head>
  <body>
    <body>
          <div></div>
          <div>java2s.com</div>

    </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter: