最新のWeb開発のチュートリアル
 

jQuery - 寸法

❮前 次の章❯

jQueryを使って、要素と、ブラウザウィンドウのサイズで動作するように簡単です。

jQueryの寸法方法

jQueryのは、寸法を操作するためのいくつかの重要なメソッドがあります。

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

jQueryの寸法

jQueryの寸法

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

width()メソッドセットまたは要素（除外の幅を返しますpadding, borderやmargin ）。

height()メソッドは、要素（除外のの高さを設定または返しますpadding, borderやmargin ）。

次の例では、指定の幅と高さを返す<div>要素を：

例

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});
»それを自分で試してみてください

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

innerWidth()メソッドは、要素の幅を（含ま返しpadding ）。

innerHeight()メソッドは、要素の高さを（含ま返しpadding ）。

次の例では、指定の内側の幅/高さを返す<div>要素を：

例

$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});
»それを自分で試してみてください

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

outerWidth()メソッドは、要素の幅を返します（含みpaddingとborder ）。

outerHeight()メソッドは、要素の高さを返します（含みpaddingとborder ）。

次の例では、指定の外側の幅/高さを返す<div>要素を：

例

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});
»それを自分で試してみてください

outerWidth(true)メソッドは、要素の幅を（含ま返しpadding, border 、およびmargin ）。

outerHeight(true)メソッドは、要素の高さを（含ま返しpadding, border 、およびmargin ）。

例

$("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);
});
»それを自分で試してみてください

練習で自分自身をテスト！

演習1» 演習2» 演習3» 演習4» 演習5»

jQueryのCSSリファレンス

すべてのjQueryのCSS方法の完全な概要については、当社をご覧くださいjQueryのHTML / CSSリファレンス 。


❮前 次の章❯