Baccho Log

No Image

Sponsored Link

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

  • 投稿日:
  • 更新日:
Tags:
JavaScript jQuery
Categories:
プログラミング

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

« [jQuery]ウィンドウのリサイズ処理[jQuery]onとoff »

Sponsored Link

コメントする

記事の感想や修正依頼等ありましたら、コメントをお願いいたします