.height()

Syntax

.height() (getter)

Parameters

None

Return value

The height of the element in pixels

Description

Get the current computed height for the first element in the set of matched elements.

.height() returns a unitless pixel value (for example, 400).

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

Syntax

.height() (setter)

Description

Set the CSS height of each element in the set of matched elements.

.height(value)

Parameters

value: An integer representing the number of pixels, or an integer with an optional unit of measure appended

Return value

The jQuery object, for chaining purposes.

Description

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 document height

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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>header 1</h1></div>
    </body>
</html>

Click to view the demo

Get tag height

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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>header 1</h1></div>
    </body>
</html>

Click to view the demo

Set height

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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>header 1</h1></div>
    </body>
</html>

Click to view the demo

Window height

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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>Paragraph</p>

    </body>
</html>

Click to view the demo

Pass the value from .height() to a function

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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 the .height() function

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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></div>

    </body>
</html>

Click to view the demo