【javascript】id/class名をキーにclassを動的に追加・削除する方法

アイキャッチ
本記事はこんな人向け
javascriptで動的にclassを追加したい

ボタンを押したときなど、アクションを起こした際に
classを動的に変更したい場面の対応方法をご紹介します。

この記事を読むと
  • javascriptでのclassの追加・削除ができる

id名をキーにclassを追加・削除

まずはid名をキーにclass名を変更してみます。
今回は文字色を赤にするcssを用意し、
付けたり消したりしていきます。

classの追加

↓サンプル。ボタンを押したら文字色がデフォルト(黒)から赤に変更。

See the Pen
abvBjbN
by jun239 (@jun239)
on CodePen.

上記コードでクラスを追加を行なっています。

簡単にいえば、

‘addTest’ってidのやつ(document.getElementById(‘addTest’))を探して
“addClass”をclassに追加(classList.add(“addClass”))してね。

って命令ですね。

classの削除

↓サンプル。ボタンを押したら文字色が赤からデフォルト(黒)に変更。

See the Pen
eYpBjZm
by jun239 (@jun239)
on CodePen.

idをキーにしての追加ができれば削除はとても簡単です。
追加時との違いは

classを追加(classList.add(“addClass”);)するか
削除(classList.remove(“addClass”);)するか

のみです。

class名をキーにclassを追加・削除

つづいてはclass名をキーに操作したい場合の方法です。
idはhtml内にひとつしか存在しないため変更時の他への影響は
あまり考える必要はありませんが、
classはいくつ存在するかわからないので少し注意が必要です。

classの追加

↓サンプル。ボタンを押したら真ん中のテキスト以外の文字色がデフォルト(黒)から赤に変更。

See the Pen
NWGbBRo
by jun239 (@jun239)
on CodePen.

ポイントは2つ。

  • 「getElementById」ではなく「getElementsByClassName
  • 「getElementsByClassName(‘addTest’)[0]」の“[0]”部分

idをキーにしていたときはなかった「[0]」の指定ですが、
これは「’addTest’というclassをもった要素のひとつめ」を意味します。
※プログラムの世界では「1」からではなく「0」から数える

サンプルでは[0]と[2]を指定しているため、
ひとつ目とみっつ目の色が変更されています。

あ、「getElements」と複数形になっているのも地味に注意です。
id用のコードをコピって、「getElementByClassName」と
書くのはみんな経験済みではないだろうか。。

classの削除

↓サンプル。ボタンを押したら真ん中のテキスト以外の文字色が赤からデフォルト(黒)に変更。

See the Pen
bGVBjgz
by jun239 (@jun239)
on CodePen.

idをキーとしたときと同じく、
「classList.add」→「classList.remove」に変わっただけですね。

jQueryを用いたclassの追加・削除

最後はjQueryでのやり方についての説明です。

jQueryってなんぞ??

って方は無理にやる必要はありません。
雑にいうとjavascriptをもっと簡単に書く方法ですが、
上記のやり方で実装はできるので、

もっと楽に書きたいなーと思ったときにまた調べれば良いと思います。

classの追加

では、classの追加方法からです。
↓サンプル。ボタンを押したら文字色がデフォルト(黒)から赤に変更。

See the Pen
RwWoBZy
by jun239 (@jun239)
on CodePen.

いままで「document.getElementById(‘addTest’)」と
対象のidを指定してきましたが、
jQueryでは「$(‘#addTest’)」と短く書くことができます。

ちなみに「$(‘#addTest’)」の「#」はidを意味しており
「$(‘.addTest’)」と書くとclassを意味します。

つまり「#addTest」は「id=”addTest”ってやつを探してー!」という意味で
「.addTest」は「class=”addTest”ってやつを探してー!」ってことですね。

classの削除

↓サンプル。ボタンを押したら文字色が赤からデフォルト(黒)に変更。

See the Pen
vYNyaWj
by jun239 (@jun239)
on CodePen.

追加との違いは「addClass」→「removeClass」になっただけですね。

まとめ

javascriptでのclassの追加・削除を簡単に説明させていただきました。

コード1行で実装できる簡単な処理ですが、
使う機会は意外と多いと思います。

少しでも問題解決の手がかりになれば幸いです(^^)
最後までお読みいただきありがとうございました。

あなたにおすすめ

とにかくすぐにBootstrapを使いたい!5分で簡単導入

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です