デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.width( )要素の幅を取得/設定

構文

要素の幅を取得返値:数値
jQo.width( )ver1.0〜
要素の幅の設定返値:jQueryオブジェクト
jQo.width()ver1.0〜
jQo.width( function )ver1.4.1〜

機能

jQueryオブジェクトで指定した要素の幅を取得/設定します。要素の幅は左図のようにpaddingの内側を指します。

引数を設定しない場合は幅の取得になります。要素が複数あるときは最初の要素からしか取得できません
cssメソッドと異なり数値で幅が取得できるので計算に利用できます。

引数を設定すると幅の設定になります。ver1.4からは引数にfunctionを指定することも可能で、条件によって設定する値を変更するなど高度な処理にも対応できます。

解説

要素の幅を取得する

サンプル(width/01.html)を開いてbody内にdiv要素が1つあることを確認してください。div要素に対してはcssの設定で幅を50pxに設定しています。

<div></div>
div{
	width:50px;
	height:50px;
	margin:10px;
	padding:10px;
	border:3px solid #333;
	background-color:#ddd;
}

jQueryは以下の様に記述され、buttonをクリックするとdiv要素の幅を取得し、アラートで表示します。

$("button").click(function(){
	var ans = $("div").width();
	alert(ans);
})

結果としてbuttonをクリックすると、div要素の幅が(cssの設定と同じ)50と表示されます。

複数の要素からは幅を取得できません

セレクタで選択した要素が複数ある場合、widthメソッドは最初の要素の幅しか取得しません。
サンプル(width/02.html)を開いてbody内にdiv要素が2つあり、最初のdiv要素にはtestのクラス属性が付加され幅が変更されていることを確認してください(幅は上から100px,50pxになっています)。

<div class="test"></div>
<div></div>

jQueryはwidth/01.htmlから変更ありません。buttonをクリックするとアラートで100と表示され、最初のdiv要素からしか値が取得できない事が確認できます。複数の要素から高さを取得したい場合はmapメソッドを利用します。これについてはページ最下部の「メモ」を参照してください。

ページの幅も取得できます

セレクタにwindowを利用することでウインドウ幅、documentを利用することでドキュメント幅も取得できます(設定はできません)。
サンプル(width/03.html)を開いてbody内に大きなdiv要素があることを確認してください。jQueryは以下の様に記述され、buttonをクリックするとウインドウ幅とドキュメント幅を取得しアラートで表示します。

$("button").click(function(){
	var win = $(window).width();
	var doc = $(document).width();
	alert("window:"+win + "  document:"+doc);
	alert(ans);
})

実際にbuttonをクリックして、どの様な値が表示されるか確認してください。
ウインドウの幅を灰色のdiv要素より大きくしている場合は、ウインドウ幅とドキュメント幅は同じになりますが、ウインドウの幅を灰色のdiv要素より小さくした場合は差が出ると思います。div要素の幅は1000pxに固定されているので、これ以下にはなりません。

要素の幅を設定する

widthメソッドは、第2引数に「数値」を設定することで要素の幅を設定することができます。
サンプル(width/04.html)を開いてbody内の構成がwidth/01.htmlと同じ事を確認してください。jQueryは以下の様に変更され、buttonをクリックするとdiv要素の幅を100pxに設定します。

$("button").click(function(){
	$("div").width(100);
})

結果として、buttonをクリックするとdiv要素の幅が100pxになります。このサイズはmarginやpadding、borderの値を含まないので(最初の図を参照)見かけの幅が100pxではないことに注意してください。

幅を設定する場合は、セレクタで選択した要素が複数あってもOKです。すべての要素の幅をまとめて設定することができます。サンプル(width/04b.html)では2つのdiv要素がありますが、buttonをクリックすると両方とも幅が20pxになります。

引数にFunctionを設定

サンプル(width/05.html)を開いてbody内にdiv要素が5つあることを確認して下さい。jQueryは以下の様に記述されwidthメソッドの引数にfunctionの「widthFunc」が設定されています。

$("button").click(function(){
	$("div").width(widthFunc);
})

widthメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(インデックス番号、現在の幅)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で最終的に設定したい幅をreturnで返すようにします。

widthメソッドに設定するFunctionの構文
function 任意の名前(インデックス番号, 現在の幅){
 任意の処理(引数を利用可能)
 return 設定する幅;
}

サンプルwidth/05.htmlで利用したwidthFuncは以下の様になっており、index番号に1足した数値に50かけた値を返すようにしました。

function widthFunc(index, width){
	return (index+1)*50;
}

結果としてbuttonをクリックするとdiv要素の幅が、上から50px,100px,150px,200px,250pxとなります。

相対的に値を変化させる

本家サイトには記載されていなかったのですが、cssメソッドで算術複合代入子を利用して相対的に値を変化させることができていたので、widthメソッドでも試したところ、きちんと機能しました。

サンプル(width/06.html)を開いてbody内の構成がwidth/04.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのは以下の様に引数に算術複合代入子を利用している点だけです。このときクォートが必要なので忘れないようにして下さい。

$("button").click(function(){
	$("div").width("+=10");
})

結果として、buttonをクリックするたびに幅が10px増えていきます。

関連項目

borderの内側(paddingを含んだ)幅を取得したい場合はinnerWidthメソッドを利用します。
borderの外側、またはmarginもを含んだ幅を取得したい場合はouterWidthメソッドを利用します。

メモ

mapメソッドを利用して複数の要素の値を取得

サンプル(width/02.html)で確認したように、複数の要素の幅を取得しようとしても最初の要素からしか取得できません。しかしmapメソッドを利用することで対応可能です。サンプル(width/test01.html)ではbuttonをクリックすると、各div要素の幅がアラートで表示されます(値は配列です)。

単位(px,%)が利用できるか確認してみた

cssメソッドと異なりwidthメソッドは単位を必要とせず、数値のみで設定できるというメリットがあります。しかし気になったので単位(px,%)も利用できるのか確認してみました。結果としてはpxも%も問題なく利用できました。

サンプル(width/test02.html)を開きjQueryを確認してください。以下の様にwidthメソッドの引数にpxを利用しています。単位を利用する時は文字列として設定するのでクォートを忘れないようにしましょう。

$("button").click(function(){
	$("div").width("100px");
})

サンプル(width/test02b.html)では以下の様に引数に%を利用していますが、buttonをクリックするとdiv要素の幅が100%に設定されます。

$("button").click(function(){
	$("div").width("100%");
})

セレクタにwindowを利用する

heightメソッドのメモでセレクタにdocumentとwindowを設定しても同じ値になってしまうと書きましたが、widthメソッドはきちんと異なる値が返ってきます。heightのバグなのでしょうか?。
→参考:セレクタにdocumentを設定したサンプル(width/03.html
→参考:セレクタにwindowを設定したサンプル(width/03b.html