メモ:トグルスイッチ

トグルスイッチを自作

機能のON/OFFにトグルスイッチを使いたくなり、色々調べてひな形を自作してみました。
”CSSだけで実装!”というサイトが多かったのですが、私が理解し易いように出来るだけ単純な形にしました。
トグルスイッチだからではないですが、toggleメソッドを使用:
 タグに指定したクラス名がなければ追加し、あれば削除する
 tag.classList.toggle('className');

test.html の実行

クリックすると動くだけのスイッチ

test.html のコード


inputタグを追加したり、装飾を施して使いまわせるのではと期待しています。

参考になったサイト

デバイスで見かけるON,OFFのボタンをhtmlとcssで実装してみる