Question

目标：通过单击一个按钮切换黑白之间的背景颜色。

以下是我的代码，但不起作用。

<html>
<body id="pageBody">
<style>
body {background: #000000; color: #FFFFFF;}
</style>
<p>A sentence.</p>
<button type="button" onclick="changeBG()">Change BG</button>
<script>
function changeBG() {
    var bg = document.getElementById("pageBody");
    if (bg.style.backgroundColor=="#000000") {
        bg.style.backgroundColor="#FFFFFF";
        bg.style.color="#000000";
    }
    else {
        bg.style.backgroundColor="#000000";
        bg.style.color="#FFFFFF";
    }
}
</script>
</body>
</html>

Answer 1

您正在与十六进制字符串进行比较 - 浏览器将返回RGB值

"rgb(0, 0, 0)"表示黑色，"rgb(255, 255, 255)"表示白色。

这将有效：

function changeBG() {
    var bg = document.body;
    if (bg.style.backgroundColor=="rgb(0, 0, 0)") {
        bg.style.backgroundColor="#FFFFFF";
        bg.style.color="#000000";
    }
    else {
        bg.style.backgroundColor="#000000";
        bg.style.color="#FFFFFF";
    }
}

工作演示：http://jsfiddle.net/FTSYF/

Answer 2

使用类使代码更具可重用性，并避免处理浏览器更改颜色模式：

body {background: #000; color: #fff;}
body.bg {background: #fff; color: #000;}

document.body.classList.toggle('bg');

如果您希望它适用于不支持classList的旧浏览器，请使用（假设body没有其他类）：

document.body.className = document.body.className ? 'bg' : '';

在黑白背景之间切换

2 个答案: