【HTML/CSS・JS】JSでHTMLタグに複数のCSSクラスを適用する
こんにちは、しきゆらです
絶賛ブログ更新期間中ですよ、奥さん
タイトルから内容がわかるのかな・・・？
JavaScriptからHTML要素にCSSクラスを複数指定する方法を知ったのでメモ
※
HTMLに指定するクラスは、CSSクラスと表記します
JSで定義するオブジェクト的な意味でのクラスとは区別するため
CSSクラスを一つだけ指定するなら
element.className = "hoge";
でelementにhogeというCSSクラスを指定したことになります
しかし、
element.className = "hoge"; element.className = "fuga";
とするとhogeではなくfugaが指定された状態になってしまいます
<element class="hoge fuga">こんな要素はないよ</element>
という形にする場合は
element.classList.add("hoge");
element.classList.add("fuga");とすると良いようです
なお、CSSクラスを削除する場合は
element.classList.remove("hoge");とするとCSSクラスを削除できます
合わせて
element.classList.toggle("hoge");とするとelementにhogeというCSSクラスが指定されている場合は削除し、そうでない場合は追加する
ということが可能です
これを見つけるまでにかなりの時間を要しました・・・
知っていればすぐなのにね
おわり