jQuery-ディメンション


jQueryを使用すると、要素のサイズとブラウザウィンドウを簡単に操作できます。


jQueryディメンションメソッド

jQueryには、ディメンションを操作するためのいくつかの重要なメソッドがあります。

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

jQueryディメンション

jQueryディメンション


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> 次の例は、指定された要素の内側の幅/高さを返します。

$("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> 次の例は、指定された要素の外側の幅/高さを返します。

$("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 More 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の演習

エクササイズで自分をテストする

エクササイズ:

jQueryメソッドを使用して、<div>の高さと幅を500ピクセルに設定します。

$("div").().();


jQueryCSSリファレンス

すべてのjQueryCSSメソッドの完全な概要については、jQuery HTML / CSSリファレンスにアクセスしてください。