jQuery 基礎教程

jQuery エフェクト

jQuery 操作方法

jQuery 遍历

jQuery Ajax

jQuery マiscellaneous

jQueryのリファレンスマニュアル

jQueryの遍历メソッド jQueryのHTML/CSSメソッド

jQuery height() メソッド

jQueryのHTML/CSSメソッド

height()メソッドは、選択された要素の高さを取得または設定します。

height()メソッドが使用される場合、取得高さを設定する場合、それが返されます：最初の選択された要素の高さです。

height()メソッドが使用される場合、設定高さを設定する場合、それが設定されます：すべての選択された要素の高さです。

図のように、height()メソッドにはpadding、borderまたはmarginは含まれていません：

高さ値も相対的でできます。値に先頭の+=または-=文字列シーケンスの場合、現在の値に指定された数値を加えたり引いたりして目標高さを計算します（例：height（"+ = 50"））。

文法：

高さを取得します：

$(selector).height()

高さを設定します：

$(selector).height(value)

関数を使用して高さを設定します：

$(selector).height(function(index,　currentHeight))

インスタンス

DIV要素の高さを取得します：

例

$("div").click(function(){
　　$(this).height();
});

テストを見て‹/›

すべてのパラグラフの高さを設定します：

例

$("button").click(function(){
　　$("p").height(50);
});

テストを見て‹/›

すべてのパラグラフの高さに異なる単位を使用して設定します：

例

$("#btn1").click(function(){
　　$("p").height(50);
});
$("#btn2").click(function(){
　　$("p").height("7em");
});
$("#btn3").click(function(){
　　$("p").height("100vh");
});

テストを見て‹/›

ボタンをクリックしたときに、すべてのパラグラフの高さを増やします（機能を使用して）：

例

$("button").click(function(){
　　$("p").height(function(i,　val){
　　　　return　val　*　2;
　　});
});

テストを見て‹/›

height()メソッドは、ウィンドウとドキュメントの高さを見つけることもできます：

例

$(window).height();//　ブラウザウィンドウの高さを返します
$(document).height();　　//　HTMLドキュメントの高さを返します

テストを見て‹/›

width()、height()、innerHeight()、innerWidth()、outerWidth()、outerHeight()の間の差を表示します：

例

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

テストを見て‹/›

ページをスrollする際にスムーズなスクロール効果を追加します：

例

let size = $(".main").height();　//　".main"の高さを取得
$(window).keydown(function(event)　{
　　if(event.which　===　40)　{　//　下矢頭キーが押された場合
　　　　$("html,　body").animate({scrollTop:　"+="　+　size},　300);
　　}　38)　{　//　上矢頭キーが押された場合
　　　　$("html,　body").animate({scrollTop:　"-="　+　size},　300);
　　}
});

テストを見て‹/›

パラメータの値

パラメータ	説明
value	ピクセル数を示す整数、またはオプションの単位付きの整数（文字列として）
function(index, currentHeight)	関数を指定します。その関数は選択された要素の高さを返します index-要素が集合内でのインデックス位置を返す currentHeight-選択された要素の現在の高さを返す

jQueryのHTML/CSSメソッド

jQueryの遍历メソッド jQueryのHTML/CSSメソッド