在黑色和白色背景之間切換

目標：通過單擊一個按鈕在黑色和白色之間切換背景色。在黑色和白色背景之間切換

以下是我的代碼，這是行不通的。

<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

在黑色和白色背景之間切換

回答

相關問題