css( propertyName, function( index, value ) )

jQuery API の css( propertyName, function( index, value ) ) は、マッチした要素の、propertyNameに指定したプロパティ名のスタイルプロパティの値を、function関数で指定した値に設定するメソッド。その際、マッチした要素のインデックス番号と、スタイルプロパティの現在の値を、function関数に、引数として引き渡すことができる。

引数

propertyName

スタイルプロパティ名。

「background-color」のようなCSSにおけるプロパティ名でも、「backgroundColor」のようなDOMにおけるプロパティ名でも、どちらでも構わない。

function(index, value)

スタイルプロパティに設定する値を返すfunction関数。

index

インデックス番号。

value

スタイルプロパティの現在の値。

戻り値

jQuery

jQueryオブジェクト。

記述方法

jQuery( セレクター ) . css( プロパティ名, function( インデックス番号, 現在の値 ) {
    return 設定する値;
} );

「セレクター」にマッチした要素の、「プロパティ名」に指定したスタイルプロパティの値を、function関数で指定する。その際、「インデックス番号」と「現在の値」を、function関数に引き渡すことができる。

記述例

jQuery( '.jquery-sample' ) . css( 'backgroundColor', function( index, value ) {
    return 'red';
} );

クラス名が「jquery-sample」である要素のスタイルプロパティ「backgroundColor」の値を、「red」に設定する。

具体的には、クラス名が「jquery-sample」である要素の背景色を赤色に設定する。

実装例(サンプル)

背景色:

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

赤色、青色、緑色の背景色のボックスの、いづれかのボックス要素をクリックすると、「背景色:」の右側に、クリックしたボックス要素の背景色を、その色のテキストで表示する。

ピンク色の背景色のボックス要素をクリックすると、「背景色:」の右側に、クリックしたボックス要素の背景色を表示するが、テキストの色は変更しない。

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

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-css > div' ) . click( function () {
        var str = jQuery( this ) . css( 'background-color' );
        jQuery( '#jquery-sample-message' ) . text( str ) . css( 'color', function( index, value ) {
            if( str == 'rgb(255, 192, 203)' ) {
                return value;
            } else {
                return str;
            }
        } );
    } );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-sample {
    width: 300px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    background-color: pink;
    border: 1px solid gray;
    border-radius: 10px;
}
#jquery-sample-css 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-css">
        <div style="background-color: red;"></div>
        <div style="background-color: blue;"></div>
        <div style="background-color: green;"></div>
        <div style="background-color: pink;"></div>
        <span style="clear: left;"></span>
    </div>
</div>

スポンサード リンク

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