Javascript

toggleを使ってみよう

再度クリックするともとに戻るようにしていきます。

  • toggle()

toggle()

・要素をクリックするとアニメーションするようになっていますがもう一回クリックしたらもとの形に戻るようにしたい場合があります。

・今回は緑の四角をクリックすることによって赤い丸に変えるようなギミックになっていますがこれをもう一度クリックしたら赤丸から緑四角に戻すようにしていきます。

・これはjavascriptでできます。どうするかと言うと処理を.classList.add(‘circle’);と書いていましたが加えるだけではないのでaddではなくtoggleと書いてあげましょう。.classList.toggle('circle’);と書き換えてあげればいいです。

・そうすることによってtarget.circleクラスがなかったらつける。ついていたら外すという処理をしてくれます。

-Javascript