jQuery API の width( function( index, width ) ) は、マッチした要素の幅を、function関数で指定した値に設定するメソッド。その際、インデックス番号と、現在の幅の値を、引数として、function関数に引き渡すことができる。このメソッドで設定する幅は、CSSのwidthプロパティの値のことで、padding、border、marginの設定値を含んでいない点に注意。
引数
- function( index, width )
CSSのwidthプロパティに設定できる値を返す関数。
「インデックス番号」と、「現在の幅の値」を、引数として、function関数に引き渡すことができる。
- index
インデックス番号
- width
現在の幅の値。CSSのwidthプロパティの現在の値。
戻り値
- jQuery
jQueryオブジェクト。
記述方法
return 新たに設定する幅の値;
} );
「セレクター」にマッチした要素の幅を、「新たに設定する幅の値」に指定した値に設定する。その際、「インデックス番号」と、「現在の幅の値」を、引数として、function関数に引き渡すことができる。
記述例
return width + 25;
} );
クラス名が「jquery-sample」である要素の幅を、現在の幅の値に「25px」を足した値に設定する。
実装例（サンプル）
幅：
実装例（サンプル）の動作について
「±5px」ボタンを、クリックすると、赤色、青色、緑色の背景色のボックス要素の幅を、5px長くする。「±5px」ボタンを、再度クリックすると、赤色、青色、緑色の背景色のボックス要素の幅を、5px短くする。
「±10px」ボタンを、クリックすると、赤色、青色、緑色の背景色のボックス要素の幅を、10px長くする。「±10px」ボタンを、再度クリックすると、赤色、青色、緑色の背景色のボックス要素の幅を、10px短くする。
「±25px」ボタンを、クリックすると、赤色、青色、緑色の背景色のボックス要素の幅を、25px長くする。「±25px」ボタンを、再度クリックすると、赤色、青色、緑色の背景色のボックス要素の幅を、25px短くする。
実装例（サンプル）のソースコード
JavaScript
<!--
jQuery( function() {
jQuery( '#jquery-sample button' ) . toggle(
function () {
addWidth = new Number( jQuery( this ) . val() );
jQuery( '#jquery-sample-width > div' ) . width( function( index, oldWidth ) {
return oldWidth + addWidth;
} );
},
function () {
addWidth = new Number( jQuery( this ) . val() );
jQuery( '#jquery-sample-width > div' ) . width( function( index, oldWidth ) {
return oldWidth - addWidth;
} );
}
);
} );
// -->
</script>
CSS
<!--
#jquery-sample {
width: 350px;
height: 125px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-width div {
float: left;
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<p>
幅：
<button value="5" >±5px</button>
<button value="10" >±10px</button>
<button value="25" >±25px</button>
</p>
<div id="jquery-sample-width">
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<span style="clear: left;"></span>
</div>
</div>