jQueryサイズ

jQueryを使うことで、要素とブラウザウィンドウのサイズを簡単に処理できます。

jQueryサイズメソッド

jQueryは、サイズ処理に重要なメソッドを提供します：

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

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

width() メソッドは、要素の幅（内余白、枠線、外余白を含まない）を設定または返します。

height() メソッドは、要素の高さ（内余白、枠線、外余白を含まない）を設定または返します。

以下の例では、指定された <div> 元素の幅と高さを返します：

例

$("button").click(function(){
  var txt="";
  txt += "Width: " + $("#div1").width() + "</br>";
  txt += "Height: " + $("#div1").height();
  $("#div1").html(txt);
);

実際に試してみてください

jQueryのinnerWidth()とinnerHeight()メソッド

innerWidth() メソッドは、要素の幅（内余白を含む）を返します。

innerHeight() メソッドは、要素の高さ（内余白を含む）を返します。

以下の例では、指定された <div> 元素の inner-width/height を返します：

例

$("button").click(function(){
  var txt="";
  txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
  txt += "Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
);

実際に試してみてください

jQuery outerWidth() と outerHeight() メソッド

outerWidth() メソッドは、要素の幅（内側マージンと枠線を含む）を返します。

outerHeight() メソッドは、要素の高さ（内側マージンと枠線を含む）を返します。

以下の例では、指定された <div> 要素の outer-width/height を返します：

例

$("button").click(function(){
  var txt="";
  txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
  txt += "Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
);

実際に試してみてください

outerWidth(true) メソッドは、要素の幅（内側マージン、枠線、外側マージンを含む）を返します。

outerHeight(true) メソッドは、要素の高さ（内側マージン、枠線、外側マージンを含む）を返します。

例

$("button").click(function(){
  var txt="";
  txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
);

実際に試してみてください

jQuery - もっと width() と height()

以下の例では、ドキュメント（HTML ドキュメント）とウィンドウ（ブラウザのビューポート）の幅と高さを返します：

例

$("button").click(function(){
  var txt="";
  txt += "Document width/height: " + $(document).width();
  txt += "x" + $(document).height() + "\n";
  txt += "Window width/height: " + $(window).width();
  txt += "x" + $(window).height();
  alert(txt);
);

実際に試してみてください

以下の例では、指定された <div> 要素の幅と高さを設定します：

例

$("button").click(function(){
  $("#div1").width(500).height(500);
);

実際に試してみてください

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

jQuery Dimensions に関する詳細なリファレンスが必要な場合は、私たちの jQuery サイズリファレンスマニュアルにアクセスしてください。