javascript - div を 2 回クリックすると、div の色が変わりますか?

Question

背景色を変更する onClick コマンドへのリンクがあります。クリックすると色が変わるのですが、もう一度クリックすると背景色が通常の色に変わるようにするにはどうすればよいですか？

onClick="style.backgroundColor='#3E729F';"

Answer 1

スクリプト要素で関数を定義できます。

<script>
var oldColor;
function switchColor(el) {
   if (oldColor) {
        el.style.backgroundColor = oldColor;
        oldColor = null;
   } else {
       oldColor = el.style.backgroundColor;
       el.style.backgroundColor = '#3E729F';
   }
}
</script>

そしてそれをこのように呼びます：

onclick="switchColor(this);"

デモンストレーション

Answer 2

背景色の追加または削除のみが必要な場合は、要素に背景色があるかどうかを確認できます。

<script>
function highlight(e) {
    if (e.style.backgroundColor) {
        e.style.backgroundColor = null;
    } else {
        e.style.backgroundColor = "#ffa";
    }
}
</script>
<div onclick="highlight(this);">a</div>
<div onclick="highlight(this);">a</div>