jQueryでCSSクラスを取得および設定する方法

jQueryを使うことで、CSS要素の操作が非常に簡単になります。

jQuery 操作 CSS

jQuery は CSS 操作を行うためのいくつかのメソッドを持っています。以下のものについて学びます：

  • addClass() - 選択された要素にクラスを追加します
  • removeClass() - 選択された要素からクラスを削除します
  • toggleClass() - 選択された要素に対してクラスの追加/削除の切り替えを行います
  • css() - スタイル属性の設定または返却

例のスタイルシート

以下のスタイルシートは、このページのすべての例に使用されます：

.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

jQuery addClass() メソッド

以下の例では、異なる要素にクラス属性を追加する方法を示します。もちろん、クラスを追加する際には、複数の要素を選択することもできます：

例

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

自分で試してみましょう

addClass() メソッドでは、複数のクラスを指定することもできます：

例

$("button").click(function(){
  $("#div1").addClass("important blue");
});

自分で試してみましょう

jQuery removeClass() メソッド

以下の例では、異なる要素から指定されたクラス属性を削除する方法を示します：

例

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

自分で試してみましょう

jQuery toggleClass() メソッド

以下の例では、jQuery toggleClass() メソッドの使用方法を示します。このメソッドは、選択された要素に対してクラスの追加/削除の切り替えを行います：

例

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

自分で試してみましょう

jQuery css() メソッド

次の章で jQuery css() メソッドについて説明します。

jQuery HTML リファレンスマニュアル

jQuery CSS メソッドの完全な内容に関しては、私たちの jQuery CSS 操作リファレンスマニュアル