クリックで要素を変化させる実践編
ここまで学んだJavaScriptの基礎を使いながら、ボタンクリックで要素の見た目を変える実装に挑戦します。
クリック時にクラスを付け替えることでCSS側のスタイルが変化し、文字サイズや背景色、画像の切り替えなどを行えます。
小さな実装で達成感が得られるため初心者におすすめのテーマです。
まずはクラスの付け替えから
クリックイベントでclassList.toggleを使うとクラスの追加と削除をワンアクションで扱えるため便利です。
要素の取得、イベント登録、クラス切り替えという流れさえ覚えれば応用が効きます。
See the Pen 要素をクリックで変化させる実践 by Syo Yanai (@h1-tech-japan) on CodePen.
実践を増やすと理解が定着する
背景色変更、文字アニメーション、画像切り替え、アコーディオン、タブ切り替えなど、クリックで変化する機能はたくさんあります。
まずは一つ作ってみて、慣れてきたら複数の動きを組み合わせて小さなUIを作ると一気にスキルが伸びます。