jQueryのサイズ

jQueryを使用して、要素とブラウザのウィンドウの寸法を簡単に処理できます。

jQueryは、要素の寸法を効果的に操作する方法を提供します。

この章では、HTML要素の寸法を取得または設定する方法について説明します。

jQuery寸法メソッド

以下に、寸法を処理するために使用するjQueryメソッドがあります：

• width()

• height()

• innerWidth()

• innerHeight()

• outerWidth()

• outerHeight()

以下に、各メソッドの使用方法を示します。

jQueryの寸法の理解

以下の図を参照して、これらのメソッドが要素のボックスの寸法をどのように計算するかを理解してください。

jQuery width()とheight()メソッド

jQuery width()選択された要素の幅を取得または設定します（内側パディング、枠線、外側マージンを含まない）。

jQuery height()選択された要素の高さを取得または設定します（内側パディング、枠線、外側マージンを含まない）。

以下の例では、DIV要素の幅と高さを取得する方法を示します：

$("div").click(function(){
　　let w = $(this).width();
　　let h = $(this).height();
　　$(this).html("DIVの幅: "　+　w　+　"<br>"　+　"DIVの高さ: "　+　h);
});

以下の例では、すべての段落の幅および高さを設定します：

$("button").click(function(){
　　$("p").width(250);
　　$("p").height(100);
});

jQueryのinnerWidth()およびinnerHeight()メソッド

jQuery innerWidth()メソッドは、選択された要素の幅（インナーマージンを含む）を取得または設定します。

jQuery innerHeight()メソッドは、選択された要素の高さ（インナーマージンを含む）を取得または設定します。

以下の例では、DIV要素の内部幅および内部高さを取得します：

$("div").click(function(){
　　let w = $(this).innerWidth();
　　let h = $(this).innerHeight();
　　$(this).html("Inner 幅: "　+　w　+　"<br>"　+　"Inner 高さ: "　+　h);
});

jQueryのexternalWidth()およびoutsideHeight()メソッド

jQuery outerWidth()メソッドは、選択された要素の幅（インナーマージンおよびフレームを含む）を取得または設定します。

jQuery outerHeight()メソッドは、選択された要素の高さ（インナーマージンおよびフレームを含む）を取得または設定します。

以下の例では、DIV要素の外部幅および外部高さを取得します：

$("div").click(function(){
　　let w = $(this).outerWidth();
　　let h = $(this).outerHeight();
　　$(this).html("Outer 幅: "　+　w　+　"<br>"　+　"Outer 高さ: "　+　h);
});

outerWidth(true) メソッドは、選択された要素の幅（インナーマージン、フレームおよび外マージンを含む）を取得または設定します。

outerHeight(true) このメソッドは、選択された要素の高さ（インナーマージン、フレームおよび外マージンを含む）を取得または設定します。

以下の例では、DIV要素の外部幅および外部高さ（マージンを含む）を取得します：

$("div").click(function(){
　　let w = $(this).outerWidth(true);
　　let h = $(this).outerHeight(true);
　　$(this).html("Outer 幅[+margin]:"　+　w　+　"<br>"　+　"Outer 高さ[+margin]: "　+　h);
});

さらに多くの例

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

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

ウィンドウとドキュメントの幅と高さを見つけることができます：

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

jQueryのCSSリファレンス

完全なCSSメソッドのリファレンスについては、以下のURLを訪れてくださいjQueryのHTML / CSSリファレンス。