.height()

http://api.jquery.com/height/

要素の高さを計算します。

height( ) 1.0追加
height( value ) 1.0追加
height( function(index, height) ) 1.4.1追加
デモ

height( ) 1.0追加

戻り値:Integer

要素の高さを算出します。 .css('height')と.height()の違いは、後者である.height()はpxを含まない数値を返してくれます。(例:400) 一方、.css('height')はpx含む文字列で値を返します。(例：400px) 通常、計算を行う場合は、height()が使用されます。

height( value ) 1.0追加

戻り値:jQuery

要素のCSSのheightに指定した値を設定します。

引数	説明
value	px単位で設定したい高さを指定します。

height( function(index, height) ) 1.4.1追加

戻り値:jQuery

要素のCSSのheightに指定した関数の戻り値を設定します。

引数	説明
function(index, height)	px単位で設定したい高さを戻り値で返す関数を指定します。関数に渡される引数は下記の通りです。 index 要素の番号です。 height 変更前に設定されている要素の高さです。

デモ

下記はPタグ、Document、iFrame内のWindowの高さを取得するデモです。 iFrame内のWindowとDocumentの高さの関係を確認してください。

<!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-latest.js"></script>
</head>
<body>
  <button id="getp">Pタグ領域の高さ</button>
  <button id="getd">documenの高さ</button>
  <button id="getw">Windowの高さ</button>
  <div>&nbsp;</div>
  <p>
    テスト用Pタグ領域です。
  </p>
<script>
    function showHeight(ele, h) {
      $("div").text(ele + " の高さは " + h + "pxです。");
    }
    $("#getp").click(function () {
      showHeight("Pタグ領域", $("p").height());
    });
    $("#getd").click(function () {
      showHeight("document領域", $(document).height());
    });
    $("#getw").click(function () {
      showHeight("window領域", $(window).height());
    });
</script>
</body>
</html>

DIV領域の高さを30pxに変更後、色を変更するデモです。

<!DOCTYPE html>
<html>
<head>
  <style>div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
<script>$("div").one('click', function () {
      $(this).height(30)
             .css({cursor:"auto", backgroundColor:"green"});
    });</script>

</body>
</html>