Javascript - 如果语句工作,但其他没有

Question

我有一个在单击特定元素时运行的脚本.脚本会更改div的背景颜色.当用户点击div时,背景颜色必须更改为#4aa3c3,但是当用户再次单击div时,它必须更改回#fafafa.if语句有效,但由于某种原因,一旦颜色变为#4aa3c3,它就不会恢复正常.似乎我的其他声明不起作用.难道我做错了什么？

    function Active() {

    if (document.getElementById("test").style.backgroundColor !== "#4aa3c3"){
        document.getElementById("test").style.backgroundColor = "#4aa3c3";
        } else {
        document.getElementById("test").style.backgroundColor = "#fafafa";
        }
}

Answer 1

当你尝试一些基本的调试,比如

console.log(document.getElementById('test').style.backgroundColor);

你看到了问题吗？机会是,你得到的东西是这样的:

"rgb(74, 163, 195)"

所以这就是为什么if你没有按照自己喜欢的方式工作.但这不是你最大的问题.

真正的问题是您使用Presentation(CSS)来定义行为(JS).最重要的是,您使用行为来定义演示文稿.

相反,你应该做这样的事情:

document.getElementById('test').classList.toggle('toggled');

并使用CSS定义如下样式:

#test {background-color: #fafafa}
#test.toggled {background-color: #4aa3c3}