jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth)

2014年12月25日

任意の要素に対して幅/高さを設定/取得する方法を解説。また、height/width、innerHeight/innerWidth、outerHeight/outerWidthメソッドの使い分け方法も説明する。

  • このエントリーをはてなブックマークに追加

 要素の幅/高さを設定するには、heightwidthメソッドを利用します。cssメソッドでheightwidthスタイルプロパティを設定することもできますが、まずは専用メソッドであるheightwidthメソッドを利用するのが簡便です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="logo" src="http://www.wings.msn.to/image/wings.jpg" />

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  $('#logo').height(100).width(400);
});
</script>
</body>
</html>
ロゴ画像のサイズを変更するためのコード(height.html)
ロゴ画像を100×400にリサイズ
ロゴ画像を100×400にリサイズ

要素の高さ/幅を取得する

 heightwidthメソッドで引数を省略した場合には、要素の現在の高さ/幅を取得できます。高さ/幅を取得するメソッドは、heightwidthメソッドの他にも、innerHeightinnerWidthouterHeightouterWidthメソッドがありますので、併せて例示しておきます。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style type="text/css">
#box {
  height: 50px;
  width: 50px;
  border: solid 3px #000;
  padding: 10px;
  margin: 15px;
}
</style>
</head>
<body>
<div id="box"></div>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  var b = $('#box');
  console.log('コンテンツ本体:' + b.height() + '×' + b.width());
  console.log('内部余白込み:' + b.innerHeight() + '×' + b.innerWidth());
  console.log('枠線込み:' + b.outerHeight() + '×' + b.outerWidth());
  console.log('外部余白込み:' + b.outerHeight(true) + '×' + b.outerWidth(true));
});
</script>
</body>
</html>
要素の高さ/幅を取得するためのコード(height_get.html)

 コンソールに表示される結果は、以下のとおりです。

コンソール
コンテンツ本体:50×50
内部余白込み:70×70
枠線込み:76×76
外部余白込み:106×106
コンソールに表示される結果

 heightwidthinnerHeightinnerWidthouterHeightouterWidthメソッドの違いは、

  • padding(コンテンツと枠線との間の余白)
  • border-width(枠線の太さ)
  • margin(枠線と他の要素との間の余白)

を加味するかどうかという点です。

 以下に、それぞれのメソッドが示す範囲を、図でも示しておきます。outerHeightouterWidthメソッドは、引数を指定するかどうかによって、得られる値が変わる点にも注意してください。

高さ/幅関連のメソッドの使い分け

 innerHeightinnerWidthouterHeightouterWidthメソッドは、いずれも値を取得するためのメソッドで、値を設定することはできません(設定できるのはheightwidthメソッドだけです)。

処理対象:要素の高さ/幅の取得/設定 カテゴリ:属性|要素
API:.height() カテゴリ:CSS|Attributes(属性)|Dimensions(寸法) > Style Properties(スタイルプロパティ)
API:.width() カテゴリ:CSS|Attributes(属性)|Dimensions(寸法) > Style Properties(スタイルプロパティ)
API:.innerHeight() カテゴリ:CSS|Attributes(属性)|Dimensions(寸法) > Style Properties(スタイルプロパティ)
API:.innerWidth() カテゴリ:CSS|Attributes(属性)|Dimensions(寸法) > Style Properties(スタイルプロパティ)
API:.outerHeight() カテゴリ:CSS|Attributes(属性)|Dimensions(寸法) > Style Properties(スタイルプロパティ)
API:.outerWidth() カテゴリ:CSS|Attributes(属性)|Dimensions(寸法) > Style Properties(スタイルプロパティ)

※以下では、本稿の前後を合わせて5回分(第7回~第11回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

7. 要素の属性を操作するには?(attr/removeAttr)

任意の要素の、任意の属性に対して値を設定/取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。

8. 要素のプロパティを取得/設定するには?(prop)

任意の要素に対してJavaScriptのプロパティを設定/取得する方法を解説。また、要素の属性を設定/取得できるattrメソッドと機能を比較する。

9. 【現在、表示中】≫ 要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth)

任意の要素に対して幅/高さを設定/取得する方法を解説。また、height/width、innerHeight/innerWidth、outerHeight/outerWidthメソッドの使い分け方法も説明する。

10. 変数の型情報を判定するには?($.isXxxxx/$.type)

$.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説する。

11. 配列の内容を順番に処理するには?($.each)

$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery/someメソッドを、jQueryの$.eachで代替する方法も説明する。

サイトからのお知らせ

Twitterでつぶやこう!