JavaScript

[JavaScript] 要素にclassを追加・削除する(classList)

投稿日:2017年7月2日 更新日:

JavaScriptで、要素にclassを追加・削除するサンプルです。

サンプルソース

例)要素にclassを追加・削除する

(結果)
["cs1", "cs2", "cs3"] ["cs1", "cs2", "cs3", "hoge"] ["cs1", "cs3", "hoge"] true ["cs1", "hoge"]

解説

  • classを追加するには、classList.addを使用します。
  • classを削除するには、classList.removeを使用します。
  • classが存在するか判定するには、classList.containsを使用します。
  • classの追加/削除を切り替えるには、classList.toggleを使用します。
    (指定したclassが既に存在する場合は削除、存在しない場合は追加します。)

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

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

関連記事

[JavaScript] 日付オブジェクト(Date型)から年月日を取り出す

日付オブジェクト(Date型)から年月日を取り出すサンプルです。 日付オブジェクトから年月日を取り出す 例)Dateオブ ...

[JavaScript] フォーム内で自動フォーカス移動を行う

テキストボックスに最大文字数の入力がされたら、自動で次のフォーム部品へ移動するサンプルです。 自動フォーカス移動 例)最 ...

[JavaScript] フォーカス・アウト イベントを取得する(onBlur)

フォーカス・アウト イベントを取得するには、onblurを使用します。 onBlurは「オンブラー」と読みます。 サンプ ...

[JavaScript] ランダムに画像を表示する

ランダムに画像を表示するサンプルです。 ボタンを押すと以下3つの画像がランダムで表示されます。 サンプルソース 例)ボタ ...

[JavaScript] 半角は1文字、全角は2文字として文字数をカウントする

半角文字は1文字、全角文字は2文字として文字数をカウントするサンプルです。 サンプルソース 例)半角文字は1文字、全角文 ...

スポンサーリンク