Question

以下是代码：

<!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>

我想要发生的是，当我按下“In”按钮时，我想将其设为绿色，如果我按下“Out”按钮，它也会是绿色但是“In”按钮将恢复其原始颜色。我想把它变成一个切换按钮。怎么样？

Answer 1

问题是你只是改变property（当前按钮）的背景颜色，因为它的背景颜色不是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)">

<强>的JavaScript

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';
}

JS Bin：http://jsbin.com/eCAcOFIY/1/

javascript中切换按钮的颜色管理

1 个答案: