Javascript：比较 javascript 设置的背景颜色

Question

如何比较元素的背景颜色，当颜色设置为 javascript 时，我想要一个切换背景颜色的函数：

function toggleBgColor() {
    if(document.getElementById("id").style.backgroundColor === "blue"){
        document.getElementById("ide").style.backgroundColor = "red");
    }else{
        document.getElementById("ide").style.backgroundColor = "blue");
    }
}

问题是比较总是错误的，所以我的背景总是蓝色，但它希望在调用函数时颜色从蓝色切换到红色，反之亦然

Answer 1

使用Window.getComputedStyle() — https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle.

Answer 2

backgroundColor 属性可能会因各种颜色表示而变得棘手。考虑改为类：

JavaScript

function toggleBgColor() {
    var el = document.getElementById("id");
    var hasBlue = el.classList.contains('blue');
    el.classList.toggle('blue', !hasBlue);
    el.classList.toggle('red', hasBlue);
}

CSS

.blue {
  background-color: blue;
}
.red {
  background-color:red;
}

或语义更正确：

JavaScript

function toggleBgColor() {
    document.getElementById("id").classList.toggle('selected');
}

CSS

#id {
    background-color:red;
}
#id.selected {
    background-color:blue;
}

Answer 3

为什么不简单地添加一个 class 来切换？

function toggleBgClass() {
    var element = document.getElementById('id');

    if (element.classList.contains('blue')) {
        element.classList.add('blue');
        element.classList.remove('red');
    }
    else {
        element.classList.add('red');
        element.classList.remove('blue');
    }
}

现在，在您的 CSS 中：

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}

Answer 4

您编写的代码不正确。正确的代码是

    function toggleBgColor()
    {
       if(document.getElementById("ptag").style.backgroundColor === "blue")
       {
         document.getElementById("ptag").style.backgroundColor = "red";
       }
       else
       {   
         document.getElementById("ptag").style.backgroundColor = "blue";
       }
    };

Html 文件

<html>
    <head>
        <script type="text/javascript" src="js/backgroundtry.js"></script>
    </head>
    <body>
        <p id="ptag" style="background-color:blue;">
            Hi How are you
        </p>
        <a class="mybutton" onclick="toggleBgColor();">
            Change Color
        </a>
    </body>
</html>

Javascript：比较 javascript 设置的背景颜色

Javascript: Compare backgroundColor set by javascript

javascript

css

comparison

background