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元素指定颜色的情况下工作p>

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>

Answer 2

见http://www.mattlag.com/scripting/hexcolorinverter.php。他已经做到了这一点。当然，您不能使用文本字符串作为颜色，您必须使用十六进制代码。

javascript函数反文本颜色

2 个答案: