jQuery入門 | 要素の領域 | 要素のサイズ .width() .height()

Tags:

要素のサイズ

jQueryは、選択した要素のサイズに関する情報を簡単に取得したり設定したりできるよう、さまざまなメソッドを提供している。

メソッド 説明
.width() 選択した要素集合の最初の要素の幅を返すか、選択された要素の幅を引数として渡された値に設定する。
.height() 選択した要素集合の最初の要素の高さを返すか、選択された要素の高さを引数として渡された値に設定する。
.innerWidth() 選択した要素集合の最初の要素の幅に、パディング領域を含めた幅を返す。
.innerHeight() 選択した要素集合の最初の要素の高さに、パディング領域を含めた高さを返す。
.outerWidth() 選択した要素集合の最初の要素の幅に、パディング領域と境界線を含めた幅を返す。また、引数にtrueを渡すと、マージン領域まで含めた幅を返す。
.outerHeight() 選択した要素集合の最初の要素の高さに、パディング領域と境界線を含めた高さを返す。また、引数にtrueを渡すと、マージン領域まで含めた高さを返す。

innerとouter

jQueryでの要素サイズは次のように構成される。

要素のサイズ

接頭辞にinnerが付くメソッドは、選択した要素のサイズにパディング領域を含めたサイズ情報を返す。 接頭辞にouterが付くメソッドは、パディング領域だけでなく境界線領域まで含めたサイズ情報を返す。 接頭辞にouterが付くメソッドに引数としてtrueを渡すと、パディングと境界線領域だけでなく、マージン領域まで含めたサイズ情報を返す。

上の内容を表にまとめると次のとおりである。

メソッド 戻り値
.width() 要素の幅
.height() 要素の高さ
.innerWidth() 要素の幅 + パディングの幅
.innerHeight() 要素の高さ + パディングの高さ
.outerWidth() 要素の幅 + パディングの幅 + 境界線の幅
.outerHeight() 要素の高さ + パディングの高さ + 境界線の高さ
.outerWidth(true) 要素の幅 + パディングの幅 + 境界線の幅 + マージンの幅
.outerHeight(true) 要素の高さ + パディングの高さ + 境界線の高さ + マージンの高さ

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

.width()メソッドは、選択した要素集合の最初の要素の幅を返すか、選択された要素の幅を渡された値に設定する。 .height()メソッドは、.width()メソッドと同じように要素の高さを返したり設定したりする。

要素サイズの返却

.width()と.height()メソッドは、選択した要素のサイズを返す。

次の例は、要素の幅と高さを取得する例である。

$("button").on("click", function() {
  $("p").html("要素の幅: " + $("div").width() + "px<br/>要素の高さ: " +  $("div").height() + "px" );
});

コードを実行

要素サイズの設定

.width()と.height()メソッドは、引数を渡されると要素のサイズを設定する。

次の例は、要素の幅と高さを設定する例である。

$("button").on("click", function() {
  $("div").width(400);
  $("div").height(200);
});

コードを実行

ビューポートの返却

これらのメソッドを利用すると、ブラウザのビューポートやHTML文書のサイズも調べられる。

例

$("button").on("click", function() {
  var str = "";
  str += "documentの幅は " + $(document).width() + "px、高さは " + $(document).height() + "px で、<br>";
  str += "windowの幅は " + $(window).width() + "px、高さは " + $(window).height() + "px です。";
  $("p").html(str);
});

コードを実行

さまざまなサイズ情報を返すメソッド

次の例は、上で見たサイズ情報を返すさまざまなメソッドの違いを確認する例である。

var text = "幅: " + $("div").width() + "px, 高さ: " +  $("div").height() + "px - 要素のサイズ<br/>"
text += "幅: " + $("div").innerWidth() + "px, 高さ: " +  $("div").innerHeight() + "px - 要素のサイズ + パディング<br/>";
text += "幅: " + $("div").outerWidth() + "px, 高さ: " +  $("div").outerHeight() + "px - 要素のサイズ + パディング + 境界線<br/>";
text += "幅: " + $("div").outerWidth(true) + "px, 高さ: " +  $("div").outerHeight(true) + "px - 要素のサイズ + パディング + 境界線 + マージン<br/>";
$("p").html(text);

コードを実行

参照