【TypeScript】classやid属性を追加・削除する方法【JavaScript】

2019年6月5日2022年9月14日

当ページのリンクには広告が含まれている場合があります。

AngularでTypeScriptを使っています。

普段はサーバーやAndroidがメインなので、いざHTMLで画面をいじろうとすると骨が折れるのですが、最近ようやく慣れてきた感じがします。

TypeScriptで画面の要素を取得していじったりするのですが、最初はそれもよくわかりませんでした。
色々とドキュメントを読んでメモを取りながら勉強していたのも良い思い出です。

気づいたら、メモもそこそこの量になっていたので、復習も兼ねて記事にまとめようと思います。

そんなわけで、今回はTypeScriptでclassやid属性を追加・削除する方法についてご紹介しますね。

勉強の際にこちらのページが参考になりました。ありがとうございます。

idなどの属性を追加する場合

idだけではありませんが、要素に属性を追加する場合はsetAttributeを使います。

setAttribute(“属性の名前", "追加する値”)

例えば、idとしてhogeを追加する場合はこうなります。

const element = document.getElementById("sample"); 
element.setAttribute("id", "hoge”);

注意点としては、指定した属性が既に存在していた場合です。
この場合はsetAttributeで指定した値で上書きされますので、ご注意ください。

class属性を追加する場合

既存のclassに属性を追加したい場合にはsetAttributeではうまくいきません。

そんなときは、classList.addを使いましょう。

classList.add(“classに追加する値")

例えば、以下のように使います。

element.classList.add("1st"); 
// 結果 ==> ["1st"]

element.classList.add("2nd", "3rd");  
// 結果 ==> ["1st", "2nd", "3rd"]

ちなみに、追加しようとした値が既に存在する場合は無視されます。
同じ値が重複することはありません。

class属性を削除する

追加ときたら削除もありますよね。

既存のclassから属性を削除したい場合はclassList.removeを使います。

classList.remove("classから削除したい値")

例えば、以下のようになります。

element.classList.remove("1st");  
// 削除後のclass ==> ["2nd", "3rd"]

element.classList.remove("2nd", "3rd");  
// 削除後のclass ==> []

ちなみに、存在しないclassを指定してもエラーなどにはなりません。

class属性がある値を含んでいるか判定する

class属性に任意の値が含まれているかを判断したいこともあるでしょう。

そんなときはclassList.containsが便利です。
存在するかどうかを真偽値で返してくれます。

classList.contains("含まれているか確認する値")

例えば、classに"1st", "2nd", "3rd"という値が設定されていた場合を想定すると、以下のようになります。

// 確認用にclassを設定
element.classList.add("1st", "2nd", "3rd"); 

// 存在するので、以下はtrueが表示される
const value = element.classList.contains("2nd");  
console.log(value);

ちなみに、引数には複数の値を指定できますが、チェックされるのは第一引数だけのようです。

例えば、以下のように指定しても、第一引数の”4th”が存在しないので、falseが返ってきます。

element.classList.contains("4th", "3rd");  
// 存在しないので、false

class属性に値を付与したり外したりする

条件に応じてclassの値を切り替えたいことはありませんか？

そんなときにはclassList.toggleがおすすめです。

≈("つけたり外したりする値")

classの値を切り替えることで適用されるCSSを変えることができるので、使える場面は多そうですよね。

例えば、以下のように使えます。戻り値もありますよ。

// 確認用にclassを設定
element.classList.add("1st", "2nd", "3rd"); 

element.classList.toggle("2nd");  
// classの中身 ==>  ["1st", "3rd"] 戻り値は false 

element.classList.toggle("4th");  
// classの中身 ==>  ["1st", "3rd", "4th"] 戻り値は true

classに既にその値が存在する場合は削除し、存在しない場合は追加してくれます。

また、第二引数に真偽値を入れることで、addメソッドとremoveメソッドと同じ挙動にすることもできます。

element.classList.toggle("2nd", true);  
// classの中身 ==>  ["1st", "3rd", "4th", "2nd"] 戻り値は true

element.classList.toggle("3rd", false);  
// classの中身 ==>  ["1st", "4th", "2nd”]  戻り値は false