javascript函数反转文本颜色

Question

我有以下 javascript 函数，可以简单地更改网页的背景主题:

<script type="text/javascript">
    var i=1;
    function colorTheme(){
        if(i%2==0){
            document.body.style.backgroundColor="white";
        }
        else{
            document.body.style.backgroundColor="#313030";
            document.body.style.color= white;
        }
        i++;
    }
</script>
<br>
<button onclick="colorTheme()">Click me</button>

当我将页面的背景主题更改为黑色时，我想反转文本颜色，以便整个页面仍然可读。我在网上看到 document.body.style.color="whatever color you want" 应该可以改变整个网页的文本颜色，但由于某种原因，这不起作用。这行代码没有将我整个网页的文本颜色更改为白色是否有原因？

Answer 1

您需要引用颜色字符串，即 white

document.body.style.color= 'white'; //Quotes around the color

Demo

---

此外，它在您为 div 指定颜色的情况下不起作用。或 p由于特殊性和覆盖继承的元素 color

Demo 2 (这里的 p 不会使用白色，因为 red 是使用 CSS 为 p 元素设置的，所以不会继承 body 元素的颜色)

最好交换样式表而不是分配 color至 body如果color，标签将不起作用也适用于其他元素。

---

正如您所说，您不确定样式表的交换意味着什么，因此您需要分配，比如 id到 <link>标记为..

HTML

<link id="swapper" rel="stylesheet" type="text/css" href="default.css" />

现在创建一个交换器函数，例如..

JavaScript

function swapper(select_sheet){
    document.getElementById('swapper').setAttribute('href', select_sheet);
}

现在调用 onClick 函数来交换样式表...

HTML

<button onClick="swapper('default.css')">Default</button>
<button onClick="swapper('stylesheet2.css')">Stylesheet 2</button>