javascript - 单击两次时更改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>