javascript中切换按钮的颜色管理_Javascript_Html_Button

javascript中切换按钮的颜色管理

javascript html button

javascript中切换按钮的颜色管理,javascript,html,button,Javascript,Html,Button,代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <script> function setColor(btn,color){ var property=document.getElementById(btn); i

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <script>
        function setColor(btn,color){
            var property=document.getElementById(btn);
            if (window.getComputedStyle(property).backgroundColor == 'rgb(244, 113, 33)') {
                property.style.backgroundColor=color;
            } else {
                property.style.backgroundColor = "#33FF00";
            }
        }
    </script>
</head>
<body>
    <input type="button" id="btnHousing" value="In" onclick="setColor('btnHousing','#fff200');" />
    <input type="button" id="btnHousing2" value="Out" onclick="setColor('btnHousing2','#fff200');" />
</body>
</html>


JS-Bin
功能设置颜色（btn，颜色）{
var属性=document.getElementById（btn）；
if（window.getComputedStyle（property.backgroundColor=='rgb（2441113,33）'{
property.style.backgroundColor=颜色；
}否则{
property.style.backgroundColor=“#33FF00”；
}
}

我想发生的是，当我按下“输入”按钮时，我想使其变为绿色，如果我按下“输出”按钮，它也将变为绿色，但“输入”按钮将恢复其原始颜色。我想让它像一个切换按钮。如何操作？

问题在于，您仅更改

属性（当前按钮）的背景色，因为其背景色不是rgb（244、113、33）
（橙色阴影）。考虑到背景颜色仅为绿色或黄色，因此仅执行else
部分，并且仅对当前按钮执行
我不确定rgb（244，113，33）

从哪里来，但是如果您想在绿色和黄色之间切换按钮（

\33FF00

和

\fff200

），下面的解决方案是有效的

HTML

<input type="button" id="btnHousing" value="In" onclick="setColor(this)">
<input type="button" id="btnHousing2" value="Out" onclick="setColor(this)">

JS Bin：

function setColor (obj) {
    var btn1 = document.getElementById('btnHousing'),
        btn2 = document.getElementById('btnHousing2');

    // Reset both backgrounds.
    btn1.style.backgroundColor = btn2.style.backgroundColor = '#fff200';

    // Change the current background to green.
    obj.style.backgroundColor = '#33FF00';
}