連載：jQuery逆引きリファレンス

【属性＆コンテンツ編】

要素の高さや幅を取得するには？
− height()、width()、innerHeight()、innerWidth()、outerHeight()、outerWidth() −

山田 祥寛（http://www.wings.msn.to/）
2009/11/13

　要素の高さや幅を取得するには、height／width、innerHeight／innerWidth、outerHeight／outerWidthなどのメソッドを利用します*。

*これらのメソッドは、それぞれ要素が表示／非表示かどうかにかかわらず動作します。

　これだけさまざまなメソッドがあると、どれを使ったらよいのか迷うところかもしれませんので、それぞれの違いを以下の表にまとめておきます。それぞれのメソッドの違いは、padding（内容と枠の間の余白）、border-width（枠線の太さ）、margin（枠外の余白）を高さ／幅に含めるかどうかです。

 
padding
border-width
margin
height、width
×
×
×
innerHeight、innerWidth
○
×
×
outerHeight、outerWidth
○
○
×
outerHeight、outerWidth（true）
○
○
○
それぞれのメソッドの対応関係

　outerHeight／outerWidthメソッドはデフォルトではマージンを無視しますが、引数にtrueを指定することでマージンまで含めた高さ／幅を取得できます。

　以下に、具体的なサンプルも見てみましょう。<div>要素の高さ／幅をそれぞれのメソッドで取得し、得られる値の違いを確認します。

<style type="text/css">

.box {
  background-color: Yellow;
  border : solid 10px Red;
  padding : 10px 5px 5px 15px;
  margin : 20px 5px 5px 25px;
}

</style>

……中略……

<script type="text/javascript">

$(function() {

  var b = $('div.box');

  window.alert(
    'height/width:' + b.height() + '/' + b.width() + '\n' +
    'innerHeight/innerWidth:'
          + b.innerHeight() + '/' + b.innerWidth() + '\n' +
    'outerHeight/outerWidth:'
          + b.outerHeight() + '/' + b.outerWidth() + '\n' +
    'outerHeight/outerWidth(true):'
          + b.outerHeight(true) + '/' + b.outerWidth(true)
  );
});

</script>

……中略……

<div class="box">
<h3>ASP.NET MVC 実践プログラミング</h3>
.NET Frameworkの新たなWebフレームワークASP.NET MVCがいよいよ登場です。
本書ではASP.NET MVCを初めて学ぶ人のために……
リスト042 <div>要素の高さ／幅をそれぞれのメソッドで取得（HeightWidth.html）

ブラウザで開く

リスト042の実行結果

　これらのメソッドを利用することで、$(window)や$(document)の高さ／幅も取得できますが、使用しているブラウザによって得られる値が異なりますので、注意してください。



　INDEX
　 jQuery逆引きリファレンス
　  1．セレクタ編
  2．属性＆コンテンツ編
　  3．トラバーシング編
　  4．要素の操作＆ユーティリティ編
　  5．コア編
　  6．イベント編
　  7．エフェクト編
　   8．Ajax編（前編）
　   9．Ajax編（後編）
    10．jQuery 1.4編
　
インデックス・ページヘ 　「jQuery逆引きリファレンス」

TechTargetジャパン

Insider.NET フォーラム 新着記事
  • Kinectが切り開く“夢の近未来” （2012/2/2）
    　日本を含めた世界中でKinect for Windowsセンサー商用版とSDK正式版がリリース。未来のコンピューティングはどう変化するのか？
  • 3つの視点でネイティブと.NETの適材適所を考察 （2012/1/31）
    　アプリ開発は「ネイティブ」と「.NET」、どちらが最良？ その問いには「適材適所」と答えるしかない。では、“適所”は一体どこかを考察する
  • SQL Azure Data Sync入門 （2012/1/30）
    　SQL Azure／SQL Serverデータベース間のデータ同期を簡単に実現するサービスとは？ その仕組みや使用手順を解説
  • Windows Phoneアプリ市場の現状を分析する （2012/1/27）
    　Windows Phone のアプリ・ストアに日々登録されている多種多様なアプリ。カテゴリ別のアプリ数は？ 市場の現状を明らかにする

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH