jQuery入門 | CSSスタイルおよびプロパティ設定 | CSSスタイル設定 .css()

CSSスタイル設定

jQueryを使用すると、選択した要素のスタイルに関するプロパティ値を簡単に取得したり設定したりできる。

.css()メソッド

jQueryでは、.css()メソッドを使用して、選択した要素のCSSスタイルを簡単に設定できる。.css()メソッドは、選択した要素集合の最初の要素のスタイルプロパティ値を返すか、選択した要素のスタイルプロパティを引数で渡された値に設定する。

スタイル設定

$("p").css("backgroundColor", "#00ff00")

上の例で、.css()メソッドはすべての<p>要素の背景色を#00ff00に設定する。

コードを実行

スタイルを返す

$("p").css("backgroundColor")

上の例で、.css()メソッドは最初の<p>要素の背景色を返す。

コードを実行

複数のスタイルを一度に設定する

.css()メソッドを使用すると、選択した要素のスタイルに関する複数のプロパティ値を一度に設定することもできる。

$("p").css({
  "fontSize": "30px",
  "backgroundColor": "yellow"
});

すべての<p>要素の文字サイズを30pxに設定し、背景色を黄色に設定する。

コードを実行

プロパティ名の設定方式

JavaScriptでは、ハイフン（-）でつながれたCSSプロパティ名を使用するとき、ハイフンを削除して名前をcamelCase形式に変更して使う必要がある。

しかし、jQueryの.css()メソッドでは、ハイフンでつながれたCSSプロパティ名とcamelCase形式のプロパティ名をどちらも使用できる。

  $("p").css({
    "fontSize": "30px",
    "color": "#ffffff",
    "background-color": "green"
  });

fontSizeはJavaScriptとjQueryの両方で使用できるが、background-colorはjQueryでのみ使用できる。

コードを実行