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);"

demonstration

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>

单击两次时更改div的颜色？

2 个答案: