css()

cssメソッドはCSSの取得・変更が可能なメソッドです。

第一引数にCSSプロパティのみを指定した場合は、そのCSSプロパティの値を返します。次の例でセレクターで取得したem要素が複数ある場合は最初のem要素のcolorプロパティを取得します。

var color = $("em").css("color");

第２引数に値を指定したばあいはCSSプロパティの変更を行ないます。次の例ではem要素のcolorプロパティをredに変更しています。

$("em").css("color","red");

引数にオブジェクトを受け渡すことで複数のCSSの値を同時に変更できます。

$("em").css({
	"color":"red",
	"background":"blue"
});

cssText

css()では特殊な値としてcssTextを指定することが可能です。cssTextを指定する場合は値にプロパティ名:値の順に記述を行います。

$("em").css("cssText","color:red");

複数のプロパティを変更する場合はセミコロンで区切って設定を行います。

$("em").css("cssText","color:red;background:blue");

cssTextで指定した値は要素のstyle属性に直接反映されれますので!importantなど特殊な設定も可能です。

$("em").css("cssText","color:red !important;background:blue");

jQuery 1.8.0での追加/変更

jQuery1.8からcssメソッドとanimateメソッドにCSSプリフィックスの自動補完が機能が追加されました。

これまでは次のように記述して複数ブラウザのCSS3を記述しなくていけませんでした。

$("em").css({
  "-webkit-user-select": "none",
  "-moz-user-select": "none",
  "-ms-user-select": "none",
  "user-select": "none"
});

しかし、jQuery1.8から対応ブラウザのベンダープリフィックスを自動補完してくれるようになったので次のようにベンダープリフィックス無しで記述が可能になります。

$("em").css("user-select", "none");

jQuery 1.9.0での追加/変更

jQuery1.9beta1からcssメソッドにCSSプロパティの配列を渡すことで値のリストをオブジェクトで返す機能が追加されました。

var dims = $("#box").css([ "width", "height", "backgroundColor" ]);
cosnole.log(dims);//{width: "100px", height: "100px", backgroundColor: "rgb(255, 0, 0)"}

sample

参考URL

.css() – jQuery API

登録日 : 2012年09月11日最終更新日 : 2012年9月11日

jQuery リファレンス

css()

cssText

参考URL

同じカテゴリー(CSS)のエントリー

検索

スポンサードリンク

バージョン

リファレンス