.css()

http://api.jquery.com/css/

要素のCSSプロパティに値を設定、または設定されているプロパティ値を取得します。要素が複数マッチしている場合、最初の要素の属性のみを取得、参照します。各要素のCSSのプロパティ値を取得したい場合は、.each()や.map()を使用してください。

.css( name ) 1.0追加
.css( names ) 1.9追加
.css( name, value ) 1.0追加
.css( name, function(index, value)) 1.4追加
.css( map ) 1.0追加
補足事項
デモ

.css( name ) 1.0追加

戻り値:String

指定した属性の値を取得します。

引数	説明
name	値を取得したいCSSのプロパティ名を指定します。

$('div').css("background-color");

.css( names ) 1.9追加

戻り値:Object

指定した属性の値を取得します。

引数説明

names

引数	説明
names	型：`Array` 1つ、または複数のCSSプロパティを指定します。戻り値は、プロパティのキーと値のペアのオブジェクトになります。

型：Array

1つ、または複数のCSSプロパティを指定します。戻り値は、プロパティのキーと値のペアのオブジェクトになります。

var styleProps = $(this).css( ["width", "height", "color", "background-color"] );

.css( name, value ) 1.0追加

戻り値:jQuery

指定した属性にvalueの値を設定します。

引数	説明
name	値を設定したいCSSのプロパティの名前を指定します。
value	設定する値を指定します。

$('p').css("color","red");

.css( name, function(index, value)) 1.4追加

戻り値:jQuery

指定した属性に関数の戻り値を設定します。

引数

説明

name

値を設定したいCSSのプロパティの名前を指定します。

function(index, css)

新しいCSSのプロパティ値を戻り値として返す関数を指定します。関数で取得できる2つの引数は、下記のとおりです。

index: 要素の番号
css: 変更前のCSSのプロパティの値

戻り値が無し、またはundefinedの場合は現在値は変更されません。

$('div.example').css('width', function(index) {
  return index * 50;
});

.css( map ) 1.0追加

戻り値:jQuery

各属性にmap値を用いてまとめて値を設定します。

引数	説明
map	CSSのプロパティ名と値のペアのマップ値を指定することで、まとめて要素のCSSのプロパティを設定することが出来ます。

$('div').css({
  'background-color' : '#ddd',
  'font-weight' : '',
  'color' : 'rgb(0,40,244)'
});

補足事項

jQueryの.css()メソッドの利点は、異なるブラウザ間で共通のstyleプロパティ名で値を取得できることです。 (多くのブラウザではgetComputedStyle()メソッドが使用されますが、IEではcurrentStyleとruntimeStyleプロパティが使用されます) 例えば、IEではfloatプロパティを参照するにはstyleFloatを使用しますが、W3Cに準拠したブラウザではcssFloatを使用します。このメソッドを使えば、単に"float"と指定すれば、ブラウザの違いを気にすること無く値を参照することができます。

プロパティ名をクォーテーションで囲むのは任意ですが、アンダーバーを含むプロパティ名では囲む必要があることに注意してください。

また、jQueryはCSSとDOMで異なるプロパティ名の場合でも正しい値を返します。例えば、.css('background-color')と.css('backgroundColor')のどちらでも正しい値を返します。 CSSのcolorについてはブラウザによって理論的には同じでもテキストとしては異なる(例：#FFF, #ffffff, rgb(255,255,255))値を返す事がかもしれません。

CSSプロパティの略語はサポートされていません。(例: margin, background, border) marginのそれぞれの値を取得したい場合は、$(elem).css('marginTop')や$(elem).css('marginRight')を指定してください。

$('#mydiv').css('color', '')のように空の文字列を指定すると、直接その要素に与えられたか、 .css()メソッドやその他のDOM制御メソッドで指定されたものであれば削除されます。スタイルシートや<style>によって指定されている場合は削除されません。

jQuery1.6から.css()メソッドは.animate()メソッドと同じような値を受け取る事が出来るようになりました。 += または -= から始まる文字列を指定して現在値を増加、減少することが可能です。例えば、padding-leftが10pxの要素があり、.css( "padding-left", "+=15")とした場合、25pxになります。

デモ

各DIV要素をクリックすると、カラー情報を取得して出力します。

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span id="result">&nbsp;</span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
  var color = $(this).css("background-color");
  $("#result").html("背景色: <span style='color:" +
                     color + ";'>" + color + "</span>.");
});
</script>
</body>
</html>

DIV要素をクリックするとwidth、height、テキストカラー、背景色を取得します。

<!DOCTYPE html>
<html>
<head>
  <style>
div { height: 50px; margin: 5px; padding: 5px; float: left; }
#box1 { width: 50px; color: yellow; background-color: blue; }
#box2 { width: 80px; color: rgb(255,255,255); background-color: rgb(15,99,30); }
#box3 { width: 40px; color: #fcc; background-color: #123456; }
#box4 { width: 70px; background-color: #f11; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<p id="result">&nbsp;</p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<script>
$("div").click(function () {
  var html = ["クリックしたDIV要素のstyleは次の通りです。"];
  var styleProps = $(this).css( ["width", "height", "color", "background-color"] );
  $.each( styleProps, function( prop, value ) {
    html.push( prop + ": " + value );
  });
  $( "#result" ).html( html.join( "<br>" ) );
});
</script>
</body>
</html>

各P要素にマウスオーバーすると、そのP要素ないのフォント色が変更されます。

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>マウスオーバーすると</p>
  <p>フォント色が変更されます。</p>
<script>
  $("p").mouseover(function () {
    $(this).css("color","red");
  });
</script>
</body>
</html>

クリックすると現在の幅を200px増加します。

<!DOCTYPE html>
<html>
<head>
  <style>
  #box { background: black; color: snow; width:100px; padding:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="box">クリックしてください</div>
<script>
  $("#box").one( "click", function () {
    $( this ).css( "width","+=200" );
  });
</script>
</body>
</html>

クリックする度に現在の幅と高さをそれぞれ1.2倍に広げます。

<!DOCTYPE html>
<html>
<head>
<style>
  div { width: 20px; height: 15px; background-color: #f33; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>click</div>
<div>click</div>
<script>
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      },
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });
</script>
</body>
</html>