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