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

jQuery - 寸法


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


jQueryの寸法方法

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

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

jQueryの寸法

jQueryの寸法


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

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

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

次の例では、指定の幅と高さを返す<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()メソッドは、要素の幅を返します(含みpaddingborder )。

outerHeight()メソッドは、要素の高さを返します(含みpaddingborder )。

次の例では、指定の外側の幅/高さを返す<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リファレンス