jQuery API の width() は、最初にマッチした要素の幅を取得するメソッド。このメソッドで取得する幅は、CSSのwidthプロパティの値のことで、padding、border、marginの設定値を含んでいない点に注意。
戻り値
- Integer
整数値。
記述方法
jQuery( セレクター ) . width();
「セレクター」に最初にマッチした要素の幅を取得する。
記述例
jQuery( '.jquery-sample' ) . width();
クラス名が「jquery-sample」である要素のうち、最初にマッチした要素の幅を取得する。
実装例（サンプル）
幅：
実装例（サンプル）の動作について
赤色、青色、緑色の背景色のボックスの、いづれかのボックス要素をクリックすると、「幅：」の右側に、クリックしたボックス要素の幅を、ボックス要素の背景色の色のテキストで表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-width > div' ) . click( function () {
var strWidth = jQuery( this ) . width();
var strBackgroundColor = jQuery( this ) . css( 'background-color' );
jQuery( '#jquery-sample-message' ) . text( strWidth + 'px' ) . css( 'color', strBackgroundColor );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-width > div' ) . click( function () {
var strWidth = jQuery( this ) . width();
var strBackgroundColor = jQuery( this ) . css( 'background-color' );
jQuery( '#jquery-sample-message' ) . text( strWidth + 'px' ) . css( 'color', strBackgroundColor );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
width: 300px;
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;
cursor: pointer;
}
-->
</style>
<!--
#jquery-sample {
width: 300px;
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;
cursor: pointer;
}
-->
</style>
HTML
<div id="jquery-sample">
<p>
幅：<span id="jquery-sample-message"></span>
</p>
<div id="jquery-sample-width">
<div style="background-color: red; width: 25px;"></div>
<div style="background-color: blue; width: 50px;"></div>
<div style="background-color: green; width: 75px;"></div>
<span style="clear: left;"></span>
</div>
</div>
<p>
幅：<span id="jquery-sample-message"></span>
</p>
<div id="jquery-sample-width">
<div style="background-color: red; width: 25px;"></div>
<div style="background-color: blue; width: 50px;"></div>
<div style="background-color: green; width: 75px;"></div>
<span style="clear: left;"></span>
</div>
</div>