jQuery API の css( map ) は、mapに指定したプロパティ名とプロパティの値の対応マップの通りに設定するメソッド。
引数
- map
プロパティ名とプロパティの値の対応マップ。
-
{ プロパティ名: プロパティ値, プロパティ名: プロパティ値, プロパティ名: プロパティ値 ... }
戻り値
- jQuery
jQueryオブジェクト。
記述方法
jQuery( セレクター ) . css( { プロパティ名: プロパティ値, プロパティ名: プロパティ値, プロパティ名: プロパティ値 ... } );
「セレクター」にマッチした要素の、「プロパティ名」に指定したスタイルプロパティの値を、「プロパティ値」に指定した値に設定する。
記述例
jQuery( '.jquery-sample' ) . css( { 'backgroundColor': 'red', 'color': 'blue' } );
クラス名が「jquery-sample」である要素のスタイルプロパティ「backgroundColor」の値を、「red」に設定、「color」を「blue」に設定する。
具体的には、クラス名が「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': str, 'border': '1px solid ' + str } );
} );
} );
// -->
</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': str, 'border': '1px solid ' + 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-message {
padding: 0 10px;
border-radius: 3px;
}
#jquery-sample-css div {
float: left;
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
-->
</style>
<!--
#jquery-sample {
width: 300px;
height: 100px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample-message {
padding: 0 10px;
border-radius: 3px;
}
#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>
<span style="clear: left;"></span>
</div>
</div>
<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>
<span style="clear: left;"></span>
</div>
</div>