3章　属性、CSS操作

クラス操作

先程見た.attr()を使ってクラス属性を操作することも可能ではありますが、特にクラスは、1つの要素にカンマ区切りで複数割り当てられます。そうすると、とあるクラスだけ足したり消したりするのを.attr() で操作するのは、なかなか大変なことです。1つ足そうと思ったら、既に存在するクラスを上書きして消してしまいかねません。そこで以下のクラス操作専用のメソッドが用意されています。

.addClass()
.removeClass()
.toggleClass()
.hasClass()

.addClass(name)

指定されたクラス名をマッチした要素全てに付け足します。半角スペースで繋いで、複数のクラス名を指定することもできます。例えば、

<style type="text/css">

.woman {

  background-color: pink;

</style>

<ul>

  <li>太郎</li>

  <li>次郎</li>

  <li id="hanako">花子</li>

</ul>

$("#hanako").addClass("woman");

このようにすると、次の結果になります。

.removeClass([name])

指定されたクラス名をマッチした要素全てから削除します。クラス名を省略した場合は、全てのクラスが削除されます。

$("#hanako").removeClass("woman");

.toggleClass()

.toggleClass(name)

既に該当のクラス名があれば削除し、無ければ追加します。マッチした全ての要素に対して個々に行われます。
以下の例は、クリックする度ごとに太字になったり、元に戻ったりします。（イベントについては、後の章で詳しく見ます）

<style type="text/css">

.boldme {

  font-weight: bold;

</style>

<span id="clickme">【ここをクリックしてみて！】</span>

$("#clickme").on("click", function () {

  // ↓クリックする度に、ここの処理が呼ばれます

  $("#clickme").toggleClass("boldme");

});

実際のサンプル

クラス名は、半角スペースで区切って複数指定することもできます。

.toggleClass(name, switch)

switchが、true, falseのどちらに評価されるかにより、クラス名を追加するか又は削除するかを決定します。
（trueの場合は追加、falseの場合は削除）

.hasClass(name)

マッチした要素が指定したクラス名を持っている場合は、true、そうでない場合は、falseを返します。
例を見てみましょう。

<ul>

  <li>太郎</li>

  <li>次郎</li>

  <li id="hanako" class="woman">花子</li>

</ul>

// retには、trueが格納されます

var ret = $("#hanako").hasClass("woman");

もし複数の要素がマッチする場合は、その複数の要素の中から1つでも一致するクラスを持つ要素があれば、trueになります。

3章 属性、CSS操作