jQuery を使用すれば、要素やブラウザのウィンドウの大きさの取扱いは簡単です。

jQuery Dimension メソッド

jQuery には、大きさを操作するためのいくつかの重要なメソッドがあります：

jQuery ディメンジョン

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

width() メソッドは、要素の幅を設定または返します（padding、border、margin は含みません）。

height() メソッドは、要素の高さを設定または返します（padding、border、margin は含みません）。

例

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

Try it Yourself »

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

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

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

次の例は、指定した <div> 要素の inner-width/height を返します：

例

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

Try it Yourself »

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

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

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

次の例は、指定した <div> 要素の outer-width/height を返します：

例

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

Try it Yourself »

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);
});

Try it Yourself »

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);
});

Try it Yourself »

例

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

Try it Yourself »

jQuery - ディメンジョン（大きさ・寸法）

jQuery Dimension メソッド