JS jQueryでクラスの操作(付与・削除…etc)

2020-05-07

サイト制作において、jQueryによる操作は必要になってくると思いますが、その際、クラスの操作がよく使用されるので、その一部を記述していきます。

classの追加

まずは、クラスの追加です。
例えば、下記のような p要素 に対して処理をすることになります。
addClass()という記述を使用することで、クラスを追加する事ができます。


classの削除

次に、クラスの削除です。
こちらは、既にクラスが付与されている状態の要素に対して、removeClass()によって、クラスを削除できます。


classの追加・削除のタイミングについて

上記の内容は、$(function() { });内で記述するだけで、動作しますが、ページを読み込んだ際に実行されるので、実行のタイミングがイマイチかもしれません。
そんなときには、任意のタイミングで、実行させたい方法として、要素がクリックされたときに、実行するという方法があります。

と、このように記述することで、<p>要素がクリックされたタイミングで、‘text’というクラスが追加されます。
そして、p.textに対して、CSSで設定しておくことで、変化をつけたりする事ができます。