前回はjQueryを利用してCSSを動的に（クリックやホバーなどをトリガーにして）変化させる方法を解説しました。
しかし、例えば同じCSSをアプリケーション内のさまざまな場所で使う場合は、クラスに対するCSSを１箇所に書いて、CSSを適応させる場所にクラスをつけたほうが、メンテナンス性が上がりやすく修正が容易にできるようになります。
そのため、実際の現場ではjQueryによってCSSをそのまま書き換えるか、クラスを経由してCSSを適応させるかを使い分けることが重要になってきます。そこで、この記事ではjQueryによってクラスを追加・除去する方法を解説していきます。
addClass/removeClassメソッド
See the Pen
ZEzrPvj by Keita (@tfpiyfit)
on CodePen.
イベントが発火したときに、新しくクラスを付与するにはaddClass(“クラス名”)メソッドを利用します。
まず上記のコードについて解説します。javascriptを見てください。発火条件は$(‘target-button’)がhoverされたとき、つまりtarget-buttonクラスの要素（今回はボタン）がマウスでホバーされたときです。
そして処理の内容は$(‘target-text’)に対してaddClass()をする、つまりtarget-textクラスに対してクラスを付与するという操作を表しています。今回はhoveredクラスを付与するというものです。ここでCSSを見てください。
CSSでhoveredクラスに対してフォントサイズ・フォントの太さ・色を指定しています。そのため、hoverされたときだけCSSのhoveredで指定したスタイルがテキストに適応されます。
逆にjavascriptの4行目・5行目にあるように、hoverを外れたときはhoverdクラスが除去されています。この特定のクラスを除去するメソッドがremoveClass(“クラス名”)になります。
これがメリットになる場合
例えば、もともと存在しているクラスを動的に付け足したい場合に大きな効力を発揮します。
<p class="hogehoge">サンプル1</p>
<p class="hogehoge">サンプル2</p>
<p class="hogehoge">サンプル3</p>
<p class="sample">サンプル4</p>
<style>
.hogehoge {
font-size: 20px;
color: #0ff;
background-color: #fff;
.....
}
</style>上の例のように、もともとhogehogeに対してあるスタイルを適応していたところに加え、サンプル4に対しても動的にスタイルを適応したい場合を考えます。
これをjQueryのCSSで適応させようとすると
$('sample').css("fontSize", "20px");
$('sample').css("color", "#0ff");
...と何段も重ねて書かなければいけません。CSSの内容を変えるときも、変える箇所が増えていきしかも分散するのでメンテナンス性が非常に悪くなります。一方で、Classを付与するという方式だと
$('sample').addClass("hogehoge");の1文だけですみます。スタイルの内容を変えるときも、hogehogeクラスに対するCSS部分を変えるだけですみます。このように、jQueryでCSSを直接いじるか、Classを経由するかだけでも、だいぶプログラムのクオリティが変わってくるのです。
