要素のクラスをフラグで切り替える - JavaScriptのチュートリアル

このレッスンでは 要素へのクラスの追加と削除を 切り替えてみたいと思います。 今はドキュメントをクリックすると 要素にクラスが設定されるという 処理が書かれています。 まずは document の getElementById で top-head という要素、これですね。 ヘッダー部分なんですけれども、 この要素に対して クラスを加えるということを行っています。 具体的にはこの top-head の ヘッダーの要素ですね。 それを document の getElementById で IDから変数に取得します。 そしてその classList に対して クラスを設定するということを 行うんですが、 タイミングとしては document に対して addEventListener click と なっていますので、 ドキュメントのどこかをクリックすると、 この処理が行われます。 classList に対して add というメソッドで クラスを指定すれば そのクラスが設定されるということです。 ですからドキュメントの中の どこかをクリックすると ヘッダーのスタイルが 変わるということになります。 動きを確認しておきましょう。 この部分がヘッダーですね。 そしてドキュメントの中をクリックすると、 このヘッダーのスタイルが変わります。 もう一度リロードして クリックするとスタイルが変わると。 これをもうひとつ処理を加えて もう1回クリックすると元に戻ると。 ですからオンとオフを切り替えるような 処理にしたいと思います。 操作したいものが 今どうなってるかということを 確かめたうえで、 処理を決めるというのは よくあるパターンなんですけれども、 やはり条件文を使うわけですが、 その時に今の状態というのを 変数に取っておくというのがお約束です。 ではこれ変数で 変数の内容、切り替わりますから let で宣言をしたうえで fixed のスタイルが 設定されているかどうかということで 名前を fixed にしますけども、 設定されているか、いないかですね、 2つのうちどちらか、このような場合には、 true/false という値を使います。 論理値、論理の値ですね。 あるいはブール値、 ブーリアンといったりもします。 ブールというコンピューターの処理を考えた…