2 flat logo on transparent 256
2018-02-17

jQueryで指定した挙動でclassを追加・削除する方法を解説|コピペで動くサンプル付き

Css img

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

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

jQueryで要素を指定する際のお作法

要素を指定する際に、IDを指定する場合は#を設定します。

IDで指定する場合

<div id="wrapper">

</div>
$('#wrapper').addClass('add-class');

クラスを指定する際は.(ドット)を指定します。

クラスで指定する場合

<div class="wrapper">

</div>
$('.wrapper').addClass('add-class');

クラスを追加、削除する際に複数の要素を指定する場合は ,(カンマ)指定します。

$('.wrapper,#wrapper').addClass('add-class');

jQueryでCSSを追加する

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

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

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

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

jQueryでCSSを削除する

今度は.removeClassをして対応します。

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

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

<div class="test-class">
  <span class="span-test">テスト</span>
</div>
 $('.test-class'). removeClass('span-test');

さらに簡潔に記載する

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

$("要素").click(function(){
  $(this).toggleClass("test-css");
});

jQueryでCSSを追加、削除する際のサンプルコード

以下をメモ帳にコピペして、.html拡張子で保存し ファイルを開くと挙動を確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>テスト</title>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(function() {

        // clickイベントでdiv-actionCSSが適用されている要素を、クリックするとイベントが発火します。
            $('.div-action').on('click', function()  {

        // クリック要素をthisで取得してtext-colorの追加または削除
          $(this).toggleClass('text-color');
          });

        });
    </script>
    <style>
        /*変更する文字色のCSSクラス*/
        .text-color {color: blue;}
    </style>
</head>

<body>
    <div>
    </div>
    <div class="div-action">
        <p>ここをクリックすると文字色が変化します</p>
    </div>
</body>
</html>

その他jQueryの参考記事一覧

jQueryでナビゲーションを途中で固定し追随させる|コピペで動くサンプル付き

jQueryでひらがなをカナに自動変換し、バリデーションを設定する|コピペで動くサンプル付き

前の記事
次の記事