height()

このエントリーをはてなブックマークに追加

heightメソッドで要素の高さを求めることができます。

$("p").height()

css(‘height’) との違いはcssメソッドが「400px」のように単位を一緒に返すのに対して、heightメソッドは「400」といった数値を返します。そのため数値計算などをする場合にはheightメソッドのほうが向いているでしょう。

このメソッドはwindowとdocumentに対しても利用できます。

$(window).height();//ブラウザの高さ(viewport)を返す
$(document).height();//Webページの高さを返す。

引数に数値を指定することで要素の高さを変更できます。

$("div").height(100)

数値以外に単位を含んだ値でも高さを変更できます。

$("div").height("100px")

引数に関数を指定することで関数の返り値を高さに設定することができます。関数内では第1引数で通し番号を、第2引数で元の要素の高さを利用できます。

​$("p").height(function(index,height){
    return height+100;
})​​​​​​​;

このコードでは、p要素の高さを現在の高さに100足したものに変更しています。

paddingを含んだ要素の高さはinnerHeight()で、paddingとborderを含んだ要素の高さはouterHeight()で、paddingとborder、marginを含んだ高さはouterHeight(true)で取得できます。

参考URL

.height() – jQuery API

登録日 : 2012年10月14日 最終更新日 : 2012年10月14日

同じカテゴリー(CSS)のエントリー

検索

スポンサードリンク

バージョン

リファレンス