メモ:トグルスイッチ
トグルスイッチを自作
機能のON/OFFにトグルスイッチを使いたくなり、色々調べてひな形を自作してみました。
”CSSだけで実装!”というサイトが多かったのですが、私が理解し易いように出来るだけ単純な形にしました。
トグルスイッチだからではないですが、toggleメソッドを使用:
タグに指定したクラス名がなければ追加し、あれば削除する
tag.classList.toggle('className');
test.html の実行
クリックすると動くだけのスイッチ
test.html のコード
inputタグを追加したり、装飾を施して使いまわせるのではと期待しています。
参考になったサイト
デバイスで見かけるON,OFFのボタンをhtmlとcssで実装してみる