jQuery逆引きリファレンス
要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）
任意の要素に対して幅／高さを設定／取得する方法を解説。また、height／width、innerHeight／innerWidth、outerHeight／outerWidthメソッドの使い分け方法も説明する。
要素の幅／高さを設定するには、height／widthメソッドを利用します。cssメソッドでheight／widthスタイルプロパティを設定することもできますが、まずは専用メソッドであるheight／widthメソッドを利用するのが簡便です。
|
<!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／widthメソッドで引数を省略した場合には、要素の現在の高さ／幅を取得できます。高さ／幅を取得するメソッドは、height／widthメソッドの他にも、innerHeight／innerWidth、outerHeight／outerWidthメソッドがありますので、併せて例示しておきます。
|
<!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>
|
コンソールに表示される結果は、以下のとおりです。
|
コンテンツ本体：50×50
内部余白込み：70×70
枠線込み：76×76
外部余白込み：106×106
|
height／width、innerHeight／innerWidth、outerHeight／outerWidthメソッドの違いは、
- padding（コンテンツと枠線との間の余白）
- border-width（枠線の太さ）
- margin（枠線と他の要素との間の余白）
を加味するかどうかという点です。
以下に、それぞれのメソッドが示す範囲を、図でも示しておきます。outerHeight／outerWidthメソッドは、引数を指定するかどうかによって、得られる値が変わる点にも注意してください。
innerHeight／innerWidth、outerHeight／outerWidthメソッドは、いずれも値を取得するためのメソッドで、値を設定することはできません（設定できるのはheight／widthメソッドだけです）。
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］を参照してください。
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で代替する方法も説明する。
