传递十六进制颜色时的函数changeColor（JavaScript）答案

【问题标题】：Function changeColor with some problems when passing Hex color (JavaScript)传递十六进制颜色时的函数changeColor（JavaScript）
【发布时间】：2021-04-02 08:39:17
【问题描述】：

当我传入函数时，我有一个可以正常工作的函数（“黄色”、“蓝色”）。单击更改颜色，再次单击更改。但是如果我通过 ('#404040', 'blue')，它只能工作一次，颜色变为 #404040，但如果我再次点击，则没有任何反应。

我不知道为什么会这样，我觉得一切正常。有人可以帮忙吗？

JavaScript：


function changeColor(bgColor, textColor) {

    var textClassElements = document.getElementsByClassName("textClass");

    var spanColor = document.getElementById("spanColor");
    spanColor.style.background = bgColor;


    if (document.body.style.background != bgColor) {

        document.body.style.background = bgColor;

        for (var i = 0; i < textClassElements.length; i++) {
                
            textClassElements.item(i).style.color = textColor;
        }

    }
    else{

        document.body.style.background = 'red';
        spanColor.style.background = 'red';

        for (var i = 0; i < textClassElements.length; i++) {
                
            textClassElements.item(i).style.color = textColor;
        }
    }
    
};

HTML：

 <li class="list-3"><a style="cursor: pointer;" onclick="changeColor('#404040', 'blue');">MUDA TEMA</a></li>

【问题讨论】：

console.log(document.body.style.background);
@epascarello 怎么样？我应该把它放在哪里？

标签： javascript html dom dom-events

【解决方案1】：

通过添加和删除一个类，您可以切换颜色和其他样式。我建议使用 !important 以便 css 始终覆盖旧 css

<!DOCTYPE html>
<html>
    <head>
        <style>
            .overwritecolor{
                background-color: #000 !important;
                color: #fff !important;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="list-3">
                <a style="cursor: pointer;" onclick="changeColorTo();">MUDA TEMA</a>
            </li>
        </ul>
        <script>
            var isB = true;
            function changeColorTo(){
                var objects = new Array;
                objects.push('body', 'a');//use # for id's and . for class
                if(window.isB){
                    for(var i=0;i<objects.length;i++){
                        var obj = document.querySelectorAll(objects[i]);
                        for(var x=0;x<obj.length;x++){
                            obj[x].classList.add('overwritecolor');
                        }
                    }
                    window.isB = false;
                }else{
                    for(var i=0;i<objects.length;i++){
                        var obj = document.querySelectorAll(objects[i]);
                        for(var x=0;x<obj.length;x++){
                            obj[x].classList.remove('overwritecolor');
                        }
                    }
                    window.isB = true;
                }
            }
        </script>
    </body>
</html>

【讨论】：

【解决方案2】：

我解决了我自己的问题。就像@DaveB 说黄色返回黄色，所以 if 和 else 工作正常，而十六进制颜色不返回“十六进制”，所以它永远不会进入 else....

所以，我所做的是放置一个标志，标志需要在函数之外，否则每次我们单击函数时，标志总是为 false...

代码如下：

var flag=false;
function changeColor(bgColor, textColor) {

    var textClassElements = document.getElementsByClassName("textClass");

    var spanColor = document.getElementById("spanColor");
    spanColor.style.background = bgColor;

    

    if (flag == false) {

        flag=true;

        document.body.style.background = bgColor;

        for (var i = 0; i < textClassElements.length; i++) {
                
            textClassElements.item(i).style.color = textColor;
        }

    }
    else{

        document.body.style.backgroundColor = 'red';

        for (var i = 0; i < textClassElements.length; i++) {
                
            textClassElements.item(i).style.color = textColor;
        }

        flag=false;
    }
    
};

【讨论】：

【解决方案3】：

问题出在以下代码行：

if (document.body.style.background != bgColor) {

当document.body.style.background 设置为yellow 时，document.body.style.background 返回yellow。

但当document.body.style.background 设置为#404040 时，读取属性document.body.style.background 的调用将返回'rgb(64, 64, 64)'，因此if 的结果始终为真，因此颜色永远不会再改变。

在 Javascript 中最好避免使用颜色逻辑，而是将其保存在 CSS 类中，该类可以读取或写入您希望更改的元素。

【讨论】：

我明白了。所以唯一的解决方案是使用带有“名称”的颜色或创建一个在单击时在 CSS 中添加类的函数？
@DGF 这不是唯一的解决方案，但可能是一个在未来保持关注点分离和易于更改的解决方案。如果您想编写代码来检查和解析 rgb 文本字符串以进行比较，您也可以这样做。它可能没有那么多代码。我不太确定。解决方案的选择权在您手中。
谢谢@DaveB，我解决了。我发布了答案，感谢您的输入。