classをいつでも変更する

記事の作成日　：　2020/02/28

classを変更するのは前回の記事で実は使っていました。今回は、そんな便利な、 classNameを説明します。

全く関係のない話

あなたはiPhone派ですか？それともAndroid派ですか？
私はAndroidを使っています。

新しいAndroidでは権限の付与をユーザーが選べるようになりました。
これによってユーザーの安全性が高まりますが、
何でもかんでも権限を付与していいことではないことに注意しましょう
特に、カメラ、位置、電話、連絡先、などは危なかったりします。

おっと、長くなりすぎました。

先にサンプル

ボタンで緑、赤と切り替わるよ！

ソースコード

        
    <style>
        .green {
            background-color: rgba(0, 255, 128, 0.5);
        }
        
        .red {
            background-color: rgba(255, 79, 79, 0.5);
        }
    </style>

    <script>
        let sw;
        let elem;

        function exec() {
            elem = document.getElementById("target");
            elem.style.left = "84px";

            sw = !sw; // 0 なら 1　に。 1 なら 0 に。
            if (sw == 1) {
                elem.className = "green"; // １の時　green のスタイルを適応
            } else {
                elem.className = "red"; //　０の時　red のスタイルを適応
            }
        }
    </script>

    <input type="button" value="オンオフボタン" onclick="exec()">
    <div onclick="exec()" id="target" style="font-size: large; line-height: 3;text-align:center">ボタンで緑、赤と切り替わるよ！</div>

className

classNameにできることは、とりあえずClassを変更するということです。
これにより、スタイルシートなどを変更できます。
もともとHTMLが

<div class="red" id="target">...</div>

こうだったとしても、

↓

// javascript
    Document.getElementById("target").className = "green";

classNameを使用することで、

↓

<!-- HTML -->
    <div class="green" id="target">...</div>

classの部分を書き換えてしまいます。(イメージ)

まとめ

classNameは結構使うかも知れません。
もちろん他にもこれと同じように扱えるものもあります。
setAttribute() とか .style.background とか　いろいろ...

＜＜前　：　理論式？不等式？表
＞＞次　：　ランダム独り言