JavaScript

jQueryでHTMLのclassを操作するaddClassの使い方を解説

HTML/CSSで動きをつけるのにjQueryがよく使われます。jQueryはシンプルなコードでDOM操作ができるため、人気のライブラリです。DOM操作ではHTMLを探索したり、スタイルの変更、イベント設定ができます。

DOM操作ではHTMLタグにclassを操作することもできます。classを操作することで、CSSをあらかじめ設定しておき、jQueryで設定したclassをつけて見た目を変化させるということが可能です。

本記事ではclassを操作するメソッドの1つとしてaddClassの使い方を紹介します。

addClassとは

addClassとは指定して要素にクラスを追加するメソッドです。英語で「add」は「追加する」という意味があります。つまりclassを追加するということです。addClassの後ろの()に入力された文字をクラス名として追加します。

クラス名にあらかじめCSSを書いておくことで、classをaddClassでCSSを動かすことができます。Webサイト上では見た目が変化しますが、コード自体は変化せず、class名が追加されるだけです。

addClassを使う基本構文

jQueryでaddClassでクラス名を追加するための基本構文を解説します。基本構文は以下の通りです。

$(“セレクタ”).addClass(“クラス名”);

セレクタにはタグだけでなく、id名やclass名も指定することができます。class名を追加する場合は、二つのクラスが指定したタグにつきます。

例としてdivタグとid名がtestのタグ、class名がtestのタグにaddtestというclassをつける場合を紹介します。

  • divタグに追加:$(“div”).addClass(“addtest”);
  • id名testに追加:$(“#test”).addClass(“addtest”);
  • class名testに追加:$(“.test”).addClass(“addtest”);

addClassの使い方

クリックイベントと使う

addClassは基本構文のみで使うことはほとんどありません。addClassのコードのみでは最初からclass名をつけているのと一緒です。そのため、イベントと組み合わせて使われることがほとんどです。

最も多いのがクリックイベントと一緒に使います。ボタンやテキストをクリックすると指定した要素にclassが追加されて背景や文字色が変化したり、非表示を表示にするなどWebページを動かします。

コード例を下に示します。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <style>
    .change-color{
      color: red;
    }
  </style>
</head>
<body>
  <h1>ボタンを押すと文字色が変化します</h1>
  <button>ボタン</button>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>
  <script>
    $("button").on("click",function(){
      $("h1").addClass("change-color");
    });
  </script>
</body>

クリックイベントについては以下の記事にまとめているので、参考にして下さい。

jQueryでクリックイベントを作るおすすめの方法【on,click】

mouseoverと使う

クリック以外にはマウスポインタが要素に乗ったときに動きをつけることもあります。マウスが乗ったときに変化させる場合はmouseoverメソッドを使います。mouseoverは要素にマウスがのるというイベントに対して処理を行います。

コード例を下に示します。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <style>
    .change-color{
      color: red;
    }
  </style>
</head>
<body>
  <h1>マウスを載せるとと文字色が変化します</h1>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>
  <script>
    $("h1").mouseover(function(){
      $(this).addClass("change-color");
    });
  </script>
</body>

classを操作する他のメソッド

removeClass

removeClassはaddClassの反対でclassを削除するメソッドです。removeは「削除する」という意味があるのでclassを削除するという意味になります。addClassと組み合わせて使うことで、classを追加したり、削除して、イベントのたびに変化させることも可能です。

基本構文は以下の通りです。

$(“セレクタ”).removeClass(“削除するクラス名”);

toggleClass

toggleClassは引数に指定されたクラスがついていたら削除して、ついていなかったら追加するメソッドになります。addClassとremoveClassを組み合わせたメソッドです。toggleというのはon/offのスイッチのことを言います。

addClassとremoveClassでclassの操作をコントロールするにはコードが長くなります。しかし、toggleClassでは1行でできるのでとても便利です。よく使うメソッドなので、覚えておくことをおすすめします。

toggleについては下の記事にもまとめているので、参考にしてください。

【toggle】jQueryで表示非表示の切り替え方法を解説

まとめ

jQueryでクラスを追加するaddClassというメソッドについて解説しました。jQueryではcssメソッドでCSSを操作することが可能です。しかし、たくさんのプロパティを操作したい場合、jQueryのコードが長くなるので、動きが遅くなる可能性があります。

一方で、あらかじめCSSのコードを書いておき、classを操作するのであれば、CSSのコードは長くなりますが、動きの部分は短くなるため動きが比較的遅くなりにくいです。さらに、コードもイメージしやすくなるのでたくさんのCSSを操作したい場合はaddClassを使用することをおすすめします。