Javascript：比較由JavaScript設置的backgroundColor

Question

當用javascript設置顏色時，如何比較元素的背景色，我想要一個可切換backgroundColor的函數：

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() : //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

為什么不簡單地添加一個被切換的類呢？

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設置的backgroundColor

問題描述

4 個解決方案

解決方案1
2 已采納 2015-05-15 17:36:56

解決方案2
1 2015-05-15 17:40:50

解決方案3
1 2015-05-15 17:41:16

解決方案4
0 2015-05-15 17:54:13

Javascript：比較由JavaScript設置的backgroundColor

問題描述

4 個解決方案

解決方案1 2 已采納 2015-05-15 17:36:56

解決方案2 1 2015-05-15 17:40:50

解決方案3 1 2015-05-15 17:41:16

解決方案4 0 2015-05-15 17:54:13

解決方案1
2 已采納 2015-05-15 17:36:56

解決方案2
1 2015-05-15 17:40:50

解決方案3
1 2015-05-15 17:41:16

解決方案4
0 2015-05-15 17:54:13