交替颜色onClick

据推测,背景颜色可以是3个值之一,“青色”、“薰衣草色”, 还有别的吗

现在,如果逻辑是

Current          Changes to
--------------   -------------
cyan             lavenderblush
lavenderblush    cyan
*anything else*  lavenderblush

那么代码应该是

var style = document.getElementById('new').style;
if (style.backgroundColor === "lavenderblush") {
    style.backgroundColor = "cyan";
} else {
    style.backgroundColor = "lavenderblush";
}

或者,如果逻辑是

Current          Changes to
--------------   -------------
cyan             lavenderblush
lavenderblush    cyan
*anything else*  cyan

那么代码是

var style = document.getElementById('new').style;
if (style.backgroundColor === "cyan") {
    style.backgroundColor = "lavenderblush";
} else {
    style.backgroundColor = "cyan";
}

但是,如果逻辑是

Current          Changes to
--------------   -------------
cyan             lavenderblush
lavenderblush    cyan
*anything else*  *do not change*

那么代码是

var style = document.getElementById('new').style;
if (style.backgroundColor === "cyan") {
    style.backgroundColor = "lavenderblush";
} else if (style.backgroundColor === "lavenderblush") {
    style.backgroundColor = "cyan";
}

这是第一个作为可运行代码段的“逻辑”

function Replace() {
    var style = document.getElementById('new').style;
    if (style.backgroundColor === "lavenderblush") {
        style.backgroundColor = "cyan";
    } else {
        style.backgroundColor = "lavenderblush";
    }
}
document.getElementById('Replace').addEventListener('click', Replace);

<button id="Replace">Click</button>
<div id="new">NEW</div>

让您的生活更轻松,使用 classList API 以编程方式处理样式更改。

特别是签出 .toggle() .这是本机解决方案。不需要DEP,只需处理更简单的逻辑即可。干杯

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList