jQuery outerHeight() メソッド

jQueryのHTML/CSSメソッド

outsideHeight()メソッドで選択された要素の外部高さ（padding、borderを含む）を取得または設定します。

outsideHeight(trueメソッドで選択された要素の外部高さ（padding、borderおよびマージンを含む）を取得または設定します。

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

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

以下の図のように、externalHeight()メソッドはpaddingとborderを含みます：

マージンを含めたい場合は、outerHeight（true）を使用してください。

文法：

外部高さを取得します：

$(selector).outerHeight()

マージンを含む外部高さを取得します：

$(selector).outerHeight(true)

外部高さを設定します：

$(selector).outerHeight(value)

例

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

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

DIV要素の外部高さ（マージンを含む）を取得します：

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

すべての段落の外部高さを設定します：

$("button").click(function(){
　　$("p").outerHeight("}}100);
});

すべての段落の外部高さを異なる単位で設定します：

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

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

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

パラメータの値

jQueryのHTML/CSSメソッド