jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery の基礎 > 要素の高さと幅を取得する方法

要素の高さと幅を取得する方法

HTML での UI のレイアウトを決める際、要素の幅 (width) や高さ (height) を取得したい場合があります。

jQuery を利用すると、これらを簡単に取得できます。

jQuery では幅を取得するために width() メソッド、高さを取得するために height() メソッドが用意されています。

例えば、次の値は画面のサイズを変えると変わります。

width: px height: px

コードは次のようになります。

function set_width_height(){
  $('#w1').html($(window).width());
  $('#h1').html($(window).height());
}

$(window).resize(function(){ set_width_height(); });
set_width_height();

幅と高さをセットするところは html() メソッドに値を渡しているところが全てなのですが、画面のリサイズをしたときに値を更新できるようにしてあります。

それから、DOCTYPE がちゃんと指定されていないと正しい値が取れない場合がありますので、気をつけてください。

ホーム > jQuery の基礎 > 要素の高さと幅を取得する方法
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門