実はあまりやったことの無い操作だったので、備忘録としてまとめ。
今回は、JavaScript で要素に class 名を追加・削除する方法についてです。
参考にさせていただいた記事はこちらから。
[JavaScript] 要素にclassを追加・削除する（classList） | コピペで使える JavaScript逆引きリファレンス
https://javascript.programmer-reference.com/js-classlist/
使用するのは classList というプロパティです。
こちらを使用すると、その要素に設定されている class 名の一覧が取得できます。
このプロパティには、メソッドに add()、remove()、contains()、toggle()、replace() が用意されています。
今回は class 名の追加を行いたいので、add() メソッドを使います。
サンプルコードは下記のとおりです。
まず、HTML は下記のとおりです。
<div id='text-area'> <p>サンプルテキスト</p> </div>
続いて、JavaScript のコードはこんな感じ。
let text_area = document.getElementById("text-area");
text_area.classList.add("area1");
1行目でtext-area という id が設定されている <div> 要素を取得し、2行目でその要素に area1 という class 名を追加しています。
追加する処理はこれだけです！
もし、class 名を削除したい場合は、add() の部分を remove() に置き換え、引数に削除したい class 名を指定してください。
また、他のメソッドで出来ることは下記のとおりです。
| メソッド名 | 内容 |
|---|---|
contains(className) |
class 名が存在しているのかを判定する |
toggle(className) |
class 名が既に存在する場合は削除、存在しない場合は追加を行う |
replace(oldClassName, newClassName) |
第一引数の class 名を、第二引数の class 名に置き換える |
containso() メソッドはどこかで使いそうなので、是非覚えておきたいです。
以上、JavaScript で要素に class 名を追加・削除する方法についてでした。
ご参考になれば幸いです。
