繁体   English   中英

使用JS切换页面颜色

Toggle page color with JS

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我试图使用JS来更改页面的颜色主题,方法是单击一个按钮,然后再次单击以将其更改回(即切换)。 到目前为止,这是我的JS代码:

var i = 0;

function changeColor() {
    if (i%2 == 0) {
        switchBlue();
    } else {
        switchGreen();
    }
    i++;
}

function switchBlue() {
    document.getElementById('color-wrap-01').style.backgroundColor = "#07184a";
    document.getElementById('color-wrap-02').style.backgroundColor = "#006385";
    document.getElementById('color-wrap-03').style.backgroundColor = "#82baba";
    document.getElementById('color-wrap-04').style.backgroundColor = "#082644";
    document.getElementById('box').style.backgroundColor = "#d0dddd";
    document.getElementById('vl-01').style.borderLeft = "4px solid blue";
    document.getElementById('vl-02').style.borderLeft = "4px solid blue";

    var footerText = document.getElementsByClassName('footer-text');
    for (i = 0; i < 3; i++) {
        footerText[i].style.color = "#8eb7ba";
    }

    var headerText = document.getElementsByClassName('header-text');
    for (i = 0; i < 4; i++) {
        headerText[i].style.color = "#81babd";
    }

    var subTitle = document.getElementsByClassName('sub-title');
    for (i = 0; i < 11; i++) {
        subTitle[i].style.color = "#008688";
    }
}

function switchGreen() {
    document.getElementById('color-wrap-01').style.backgroundColor = "#074946";
    document.getElementById('color-wrap-02').style.backgroundColor = "#00865F";
    document.getElementById('color-wrap-03').style.backgroundColor = "#81BA88";
    document.getElementById('color-wrap-04').style.backgroundColor = "#084330";
    document.getElementById('box').style.backgroundColor = "#D7DDD0";
    document.getElementById('vl-01').style.borderLeft = "4px solid green";
    document.getElementById('vl-02').style.borderLeft = "4px solid green";
    var footerText = document.getElementsByClassName('footer-text');
    for (i = 0; i < 3; i++) {
        footerText[i].style.color = "green";
    }

    var headerText = document.getElementsByClassName('header-text');
    for (i = 0; i < 4; i++) {
        headerText[i].style.color = "green";
    }

    var subTitle = document.getElementsByClassName('sub-title');
    for (i = 0; i < 11; i++) {
        subTitle[i].style.color = "green";
    }
}

与此HTML:

 <div id="color-wrap-01">
     <div class="container">
             <div class="row top-header">
                 <div class="col-sm-6">
                <p align="left">Welcome, Guest <a href="https://www.google.ca/">Login</a>  <a href="https://www.google.ca/">Sign Up</a></p>
            </div>
            <div class="col-sm-6">
                <p align="right">Stay Updated: <a href="https://www.google.ca/">Subscribe via RSS</a> <a href="https://www.google.ca/">Email Updates</a></p>
        </div>
    </div>
</div>

和这个按钮:

<button onclick="changeColor()">COLOUR</button>

第一个颜色更改有效,但此后该按钮不会切换回绿色。 任何帮助表示赞赏!

1 个回复

如果您实际上要在两种颜色之间切换,可以执行以下操作:

var colorSwitch = '';
function changeColor() {
    if (colorSwitch === '') {
        switchBlue();
        colorSwitch = 'blue';
    } else {
        switchGreen();
        colorSwitch = '';
    }
}

那只是一个想法,但是您可能不需要迭代器。 您可以在这里进行测试: https : //jsfiddle.net/qwu41fno/

1 尝试用JS切换背景颜色

我是JavaScript的新手,我试图通过改变它的类来获得一个改变元素背景颜色的按钮。 我从几个不同的来源组合js,但它不起作用,我无法弄清楚为什么。 function myFunc() { var y = document.getElementById("bg-change1 ...

3 jQuery的:切换覆盖页面和颜色关闭按钮

我创建了一个包含2个重叠页面的导航。 第一个用于我的菜单,第二个用于联系表。 第一个问题是单词“ Menu”在两种颜色之间的切换。 当访问者位于窗口顶部并单击“菜单”时,一切正常。 但是,当访客向下滚动页面并再次单击“菜单”时,单词的颜色与背景相同。 我希望访问者在背景为棕色的情况 ...

4 js切换:使锚触发另一个页面中的切换

因此,我有2种不同的切换,当您单击“信息1”,然后单击“链接1”(这将使其转到网站的另一页)时,我希望它触发切换“信息2”以打开更多信息信息,但我无法弄清楚。 (在此示例中,我在同一页面上添加了两个切换开关,但最初应该是分开的) http://jsfiddle.net/qef9zvt ...

5 切换所选列表项的背景颜色react.js

当我单击列表项之一时我想要执行的操作,我希望选择所选的类别,当我再次单击时,我希望将其删除,因此基本上是一个切换功能,但它碰巧出现在所有三个列表项中,因此,如果我单击一个,则全部选中,但是我想要这样,一次只能选择一个 ...

6 在click react.js上切换列表的背景颜色

我正在尝试创建一个具有以下功能的列表。 在悬停时更改listItem的背景颜色。 单击更改listItem的背景颜色。 在点击的元素之间切换背景颜色。[即列表中只有一个元素可以点击属性] 我已经执行了onhover 1和2功能,但我无法实现第3个功能。 请帮我 ...

7 需要帮助更改页面加载时的默认js切换状态

我正在将YouTube网站JS插件用于客户端站点( https://github.com/Giorgio003/Youtube-TV )。 播放器在打开状态下加载播放列表,我需要在切换开关关闭的情况下加载播放列表,以显示播放列表的数组,有人可以帮忙吗? 我的播放器代码笔在这里http:// ...

8 如何使用js或jquery在一个页面中使用多个css切换开关

小提琴 我正在尝试制作一个切换开关,当切换时会切换图像的颜色。 我被引导到一个帮助我进行切换的教程,但它都是css,因此没有为每个使用的单个开关创建一个新的类名,我无法重复使用它(我知道)什么是最好的js或者允许我多次使用此切换的jquery。 问题是,当我点击任何一个开关时,它总 ...

9 在没有JS cookie的页面刷新后记住角度切换状态

我有两个部分正在使用angular显示和隐藏。 填写了几个字段后,我需要验证数据服务器端,并刷新页面-然后,带有ng-show / ng-hide指令的div丢失了内存。 我看到了使用js cookie来解决该问题的解决方案,但我认为这不是解决我的问题的好方法。 是否有其他方式需要记住,还 ...

10 使用Javascript切换文字颜色

我正在用来自JSON文件的输入来在php中创建菜单。 我遇到的问题是,一旦他们单击div类“菜单项”中的任意位置,我希望标题将颜色更改为绿色。 颜色变为绿色后,我还希望他们能够单击它并使它恢复到原始状态。 我了解我需要为此选项使用JavaScript或Jquery,但在任何文档中都找不到。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM