[JavaScript]幅と高さを取得 / 設定する方法

jQuery

メソッドの種類

width / height

要素の幅・高さの値を取得 / 設定出来ます。
純粋な幅と高さのみの数値で、padding等の値は取得されません。

数値のみを入力すると、px 単位で設定されます。
% や em 等を指定したい場合は、クォーテーションで囲んで単位を入力します。

$(function() {
    $('#box').width(500); // => #boxの幅を500pxに設定
    $('#box').height(500);// => #boxの高さを500pxに設定

    $('#box').width(50 + '%'); // => #boxの幅を50%に設定
    $('#box').height(50 + 'em');// => #boxの高さを50emに設定

    $('#box').width(); // => #boxの幅を取得
    $('#box').height();// => #boxの高さを取得
});

innerWidht / innerHeight

paddingを含めた要素の幅・高さの値を取得出来ます。
取得のみで、設定は出来ません。
また、border や margin の値は取得しません。

outerWidht / outerHeight

padding + border を含めた要素の幅・高さの値を取得出来ます。
取得のみで、設定は出来ません。

また、デフォルトでは margin の値は取得しません。
margin も含めた値を取得したい場合は、引数に True を設定すれば取得出来ます。

$(function() {
    $('#box').innerWidht(); // => padding を含めた #boxの幅を取得
    $('#box').innerHeight();// => padding を含めた #boxの高さを取得

    $('#box').outerWidht(); // => padding + border を含めた#boxの幅を取得
    $('#box').outerHeight();// => padding + border を含めた#boxの高さを取得

    $('#box').outerWidht(True); // => margin + padding + border を含めた#boxの幅を取得
    $('#box').outerHeight(True);// => margin + padding + border を含めた#boxの高さを取得
});

jQuery： 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth） – Build Insider

JavaScript

モニターサイズ

• モニタの幅と高さ
  モニタ全体の幅と高さです。

window.screen.width
window.screen.height

• モニタの利用可能領域(描画に利用可能なサイズ)
  表示する事が出来る領域を返します。
  例えばWindowsの場合、タスクバーの高さ等を差し引いたサイズです。

window.screen.availWidth
window.screen.availHeight

ウィンドウサイズ

• ウィンドウのビューポートのサイズ

window.innerWidth
window.innerHeight

• ウィンドウ全体のサイズ

window.outerWidth
window.outerHeight

DOMのサイズ

• Documentオブジェクト全体のサイズ

document.body.clientWidth
document.body.clientHeight

• Documentオブジェクトの表示領域(ブラウザのビューポートを超えない範囲)

document.documentElement.clientWidth
document.documentElement.clientHeight

画面サイズを取得する | Labyrinthe Noir