width( value )

jQuery API の width( value ) は、マッチした要素の幅を、valueに指定した値に設定するメソッド。このメソッドで設定する幅は、CSSのwidthプロパティの値のことで、padding、border、marginの設定値を含んでいない点に注意。

引数

value

CSSのwidthプロパティに設定できる値。

例:「200px」「75%」「auto」など。

戻り値

jQuery

jQueryオブジェクト。

記述方法

jQuery( セレクター ) . width( 幅の値 );

「セレクター」にマッチした要素の幅を、「幅の値」に指定した値に設定する。

記述例

jQuery( '.jquery-sample' ) . width( '50' );

クラス名が「jquery-sample」である要素の幅を、「50px」に設定する。

実装例(サンプル)

幅:

実装例(サンプル)の動作について

「25px」ボタンをクリックすると、赤色、青色、緑色の背景色のボックス要素の幅を、25pxにする。

「50px」ボタンをクリックすると、赤色、青色、緑色の背景色のボックス要素の幅を、50pxにする。

「75px」ボタンをクリックすると、赤色、青色、緑色の背景色のボックス要素の幅を、75pxにする。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample button' ) . click( function () {
        var strWidth = jQuery( this ) . val();
        jQuery( '#jquery-sample-width > div' ) . width( strWidth );
    } );
} );
// -->
</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;
}
-->
</style>

HTML

<div id="jquery-sample">
    <p>
        幅:
        <button value="25" >25px</button>
        <button value="50" >50px</button>
        <button value="75" >75px</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>

スポンサード リンク

カテゴリー: API, CSS, DOM操作, JavaScript, jQuery, スタイルプロパティ, 寸法 タグ: パーマリンク