jQuery API の css( propertyNames ) は、最初にマッチした要素の、propertyNamesに配列で指定した全てのプロパティ名のスタイルプロパティの値を取得するメソッド。
記述方法（構文）
jQuery( セレクター ) . css( プロパティ名を格納した配列 );
「セレクター」に最初にマッチした要素の、「プロパティ名を格納した配列」に指定した全てのスタイルプロパティの値を取得する。
引数
- propertyNames
スタイルプロパティ名を格納した配列。
「background-color」のようなCSSにおけるプロパティ名でも、「backgroundColor」のようなDOMにおけるプロパティ名でも、どちらでも値を取得できる。
戻り値
- Object
propertyNamesに指定したプロパティと値を格納したオブジェクト。
記述例
jQuery( '.sample' ) . css( [ 'background-color', 'width', 'height' ] );
クラス名が「sample」である要素のうち、最初にマッチした要素のスタイルプロパティ「background-color」「width」「height」の値を取得する。
実装例（サンプル）
background-color:
width:
背景色：
幅：
実装例（サンプル）の動作について
赤色、青色、緑色の背景色のボックス要素のいづれかのボックス要素をクリックすると、「background-color: 」と「背景色：」の右横にクリックしたボックス要素の背景色、「width: 」と「幅：」の右横にクリックしたボックス要素の幅を表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-css > div' ) . click( function () {
var $output = jQuery( '#jquery-sample-output' );
$output . html( "" );
var $styles = jQuery( this ) . css( [ "backgroundColor", "width" ] );
jQuery.each( $styles, function( $prop, $value ) {
$output . append( "<p>" + $prop + ": " + $value + "</p>" );
} );
jQuery( '#sampleOutputBackgroundColor' ).text( $styles.backgroundColor );
jQuery( '#sampleOutputWidth' ).text( $styles.width );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-css > div' ) . click( function () {
var $output = jQuery( '#jquery-sample-output' );
$output . html( "" );
var $styles = jQuery( this ) . css( [ "backgroundColor", "width" ] );
jQuery.each( $styles, function( $prop, $value ) {
$output . append( "<p>" + $prop + ": " + $value + "</p>" );
} );
jQuery( '#sampleOutputBackgroundColor' ).text( $styles.backgroundColor );
jQuery( '#sampleOutputWidth' ).text( $styles.width );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
width: 300px;
height: 175px;
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>
<!--
#jquery-sample {
width: 300px;
height: 175px;
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">
<div id="jquery-sample-css">
<div style="background-color: red;"></div>
<div style="background-color: blue; width: 75px;"></div>
<div style="background-color: green; width: 25px;"></div>
<span style="clear: left;"></span>
</div>
<div id="jquery-sample-output">
<p>background-color: </p>
<p>width: </p>
</div>
<p>背景色：<span id="sampleOutputBackgroundColor"></span></p>
<p>幅：<span id="sampleOutputWidth"></span></p>
</div>
<div id="jquery-sample-css">
<div style="background-color: red;"></div>
<div style="background-color: blue; width: 75px;"></div>
<div style="background-color: green; width: 25px;"></div>
<span style="clear: left;"></span>
</div>
<div id="jquery-sample-output">
<p>background-color: </p>
<p>width: </p>
</div>
<p>背景色：<span id="sampleOutputBackgroundColor"></span></p>
<p>幅：<span id="sampleOutputWidth"></span></p>
</div>