Pages

12 Jun 2013

.height() , jQuery .height()

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

Contents:

.height()Returns: Integer

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

  • version added: 1.0.height()

    • This method does not accept any arguments.
The difference between .css('height') and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element's height needs to be used in a mathematical calculation.
This method is also able to find the height of the window and document.
1
2
 



$(window).height();   // returns height of browser viewport







$(document).height(); // returns height of HTML document
Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css("height") rather than .height().
Note: Although style and script tags will report a value for .width() or height() when absolutely positioned and given display:block, it is strongly discouraged to call those methods on these tags. In addition to being a bad practice, the results may also prove unreliable.

Example:


Show various heights. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

 



<!DOCTYPE html>







<html>







<head>







  <style>







  body { background:yellow; }







  button { font-size:12px; margin:2px; }







  p { width:150px; border:1px red solid; }







  div { color:red; font-weight:bold; }







  </style>







  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>







</head>







<body>







  <button id="getp">Get Paragraph Height</button>







  <button id="getd">Get Document Height</button>







  <button id="getw">Get Window Height</button>







 







  <div>&nbsp;</div>







  <p>







    Sample paragraph to test height







  </p>







<script>







    function showHeight(ele, h) {







      $("div").text("The height for the " + ele +







                    " is " + h + "px.");







    }







    $("#getp").click(function () {







      showHeight("paragraph", $("p").height());







    });







    $("#getd").click(function () {







      showHeight("document", $(document).height());







    });







    $("#getw").click(function () {







      showHeight("window", $(window).height());







    });







 







</script>







 







</body>







</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)