2 flat logo on transparent 256
2018-01-29

jQueryでclassを追加・削除する方法を解説

Css img

スクロールの挙動や指定時間以上での画面ロードなどで、
デザインを変更するといった要望はかなりあると思います。

今回jQueryで指定した挙動によって、cssを追加、削除する方法を紹介します。

jQueryでCSSを追加する

基本的には下記のように利用します。

 $('要素').addClass('追加したいCSS");

以下ではIDでクラスを指定するパターンです

<div id="wrapper">
  <span>テスト</span>
</div>
 $('#wrapper').addClass('test-css');

## jQueryでCSSを削除する
今度は.removeClassをして対応します。

 $('要素'). removeClass('追加したいCSS");

IDでクラスを指定するパターン

<div id="wrapper">
  <span>テスト</span>
</div>
 $('#wrapper'). removeClass('test-css');

さらに簡潔に記載する

.toggleClassは要素が存在すれば指定のCSSを追加し、存在しなければ、削除します。
以下では指定要素をクリックした場合に、cssを追加・削除します。

$("要素").click(function(){
  $(this).toggleClass("test-css");
});
前の記事
次の記事