按鈕背景顏色切換

Question

我一直在嘗試切換按鈕 onclick 的背景顏色屬性，但顏色只更改一次並且不會來回切換。 下面是代碼。

function btnColor(btn, color) {
var property = document.getElementById(btn);
    if (property.style.backgroundColor == "rgb(244,113,33)") {
        property.style.backgroundColor=color;
    }
    else {
        property.style.backgroundColor = "rgb(244,113,33)";
    }
}

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','rgb(255,242,0)');" />

Answer 1

一個簡單的解決方案（依次為 JS、CSS 和 HTML）。 您在 CSS 中設置一個類，然后選擇按鈕（是的，JS 可以在一行中完成）並切換類。

 var button1 = document.querySelector("button"); button1.addEventListener("click", function() { document.body.classList.toggle("colorred"); });

 .colorred { background-color: red; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Change color to background</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> </head> <body> <button>Click me!</button> <script src="main.js"></script> </body> </html>

Answer 2

您遇到的問題是元素的background-color在瀏覽器中的報告方式不同，無論是 rgb、rgba（帶或不帶空格），十六進制還是 HSL ......

所以按鈕可能永遠不會滿足if條件，這意味着它總是會轉到else 。

考慮到這一點，我建議使用類名來跟蹤未/切換狀態：

function btnColor(btn, color) {
var property = document.getElementById(btn);
    if (property.className !== 'toggled') {
        property.style.backgroundColor=color;
        property.className = 'toggled'
    }
    else {
        property.style.backgroundColor = "rgb(244,113,33)";
        property.className = '';
    }
}

JS小提琴演示。

當然，如果我們使用元素的class ，我們不妨使用 CSS 來設置元素的樣式：

function btnColor(btn) {
var property = document.getElementById(btn);
    if (property.className !== 'toggled') {
        property.className = 'toggled'
    }
    else {
        property.className = '';
    }
}

使用 CSS：

#btnHousing {
    background-color: rgb(255,242,0);
}

#btnHousing.toggled {
    background-color: rgb(244,113,33);
}

JS小提琴演示。

之前的 JavaScript 可以簡化（使用相同的 CSS）：

function btnColor(btn) {
    var property = document.getElementById(btn);
    property.className = 'toggled' == property.className ? '' : 'toggled';
}

JS小提琴演示。

Answer 3

if(document.getElementById(id).style.background !== 'rgb(0, 0, 0)')

按鈕背景顏色切換

問題描述

3 個解決方案

解決方案1
5 2018-02-22 11:46:38

解決方案2
4 已采納 2013-06-11 17:23:55

解決方案3
1 2013-06-11 17:23:00

按鈕背景顏色切換

問題描述

3 個解決方案

解決方案1 5 2018-02-22 11:46:38

解決方案2 4 已采納 2013-06-11 17:23:55

解決方案3 1 2013-06-11 17:23:00

解決方案1
5 2018-02-22 11:46:38

解決方案2
4 已采納 2013-06-11 17:23:55

解決方案3
1 2013-06-11 17:23:00