代码之家  ›  专栏  ›  技术社区  ›  Valrok

javascript函数反转文本颜色

  •  1
  • Valrok  · 技术社区  · 11 年前

    我有以下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" 本应用于更改整个网页的文本颜色,但由于某些原因,这不起作用。这行代码没有将我整个网页的文本颜色更改为白色,有什么原因吗?

    2 回复  |  直到 11 年前
        1
  •  2
  •   Mr. Alien Redu    11 年前

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

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

    Demo


    此外,它在为指定颜色的场景中不起作用 div p 由于遗传的特异性和压倒性 color

    Demo 2 (此处为 p 不会尊重白色,因为 red 使用CSS为 p 元素,因此不会继承 body 元素颜色)

    最好交换样式表,而不是分配 颜色 身体 如果 颜色 也适用于其他元件。


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

    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>
    
        2
  •  1
  •   Ben    11 年前

    看见 http://www.mattlag.com/scripting/hexcolorinverter.php 。他已经这么做了。当然,不能使用文本字符串来表示颜色,必须使用十六进制代码。