函数 changeColor 在传递十六进制颜色时出现一些问题 (JavaScript)

Question

我有一个函数，当我传入函数（'yellow'、'blue'）时，它可以正常工作。单击更改颜色，再次单击再次更改。但是如果我通过 ('#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>

Answer 1

问题出在下面这行代码：

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

当 document.body.style.background 设置为 yellow 则 document.body.style.background returns yellow.

但是当 document.body.style.background 设置为 #404040 然后调用读取属性 document.body.style.background return 'rgb(64, 64, 64)' 所以结果if 始终为真，因此颜色永远不会再改变。

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

Answer 2

我解决了我自己的问题。就像@DaveB 说黄色 return 是黄色所以 if 和 else 工作正常，而十六进制颜色不 return “十六进制”所以它永远不会进入 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;
    }
    
};

Answer 3

通过添加 class 和删除它，您可以切换颜色和其他样式。我建议使用 !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>

函数 changeColor 在传递十六进制颜色时出现一些问题 (JavaScript)

Function changeColor with some problems when passing Hex color (JavaScript)

html

javascript

dom

dom-events