javascript函数反转文本颜色

javascript function inverse text color

本文关键字：文本 颜色 函数 javascript      更新时间：2023-09-26

我有以下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"应该可以改变整个网页的文本颜色，但由于某种原因，它不起作用。这行代码没有将我整个网页的文本颜色更改为白色，这是有原因的吗？

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

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

演示

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

Demo2(此处p不尊重白色，因为red是使用CSS为p元素设置的，因此不会继承body元素的颜色(

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

正如您所评论的，您不确定样式表的交换意味着什么，所以您需要为<link>标记分配一个id，比如。。

HTML

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

现在创建一个swapper函数，如。。

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>

请参阅http://www.mattlag.com/scripting/hexcolorinverter.php.他已经这么做了。当然，颜色不能使用文本字符串，必须使用十六进制代码。

相关文章：