在黑色和白色背景之间切换

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

以下是我的代码，这是行不通的。

<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>

来源

2014-06-25 Kiddy

我刚刚从w3schools了解它。我应该怎么做？ – Kiddy

'document.body'而不是从ID查找中获取正文元素。 – AlienWebguy

你比较反对一个十六进制字符串 - 浏览器将返回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/

来源

2014-06-25 15:48:12 AlienWebguy

您的代码从第二次点击开始正常工作。我刷新页面，等待超过10秒钟，第一次点击仍然不起作用。 – Kiddy

@Kiddy因为背景在测试页面上最初是白色的，而不是像您的示例中那样黑色。 –

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

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

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

如果您希望它在不支持的旧浏览器上运行，然后使用（假设body没有其他类）：

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

来源

2014-06-25 15:53:43 Oriol

在黑色和白色背景之间切换

回答

相关问题