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

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 がちゃんと指定されていないと正しい値が取れない場合がありますので、気をつけてください。