If Else 的其他部分在我的 Javascript 切换按钮中不起作用 - ASP.net / Javascript答案

【问题标题】：Else part of If Else not working in my Javascript Toggle button - ASP.net / JavascriptIf Else 的其他部分在我的 Javascript 切换按钮中不起作用 - ASP.net / Javascript
【发布时间】：2014-10-01 15:43:32
【问题描述】：

对 javascript 很陌生。

我有一个按钮，我想使用 if / else JS 逻辑来切换它的背景颜色。我的环境是ASP.net、c#、javascript、VS2013 express。

语句的第一部分将按钮颜色更改为#198B07，但是，随后的单击似乎没有触发“else”属性以将颜色设置为“#2A303C”。按钮的初始状态是具有标准的“灰色”颜色。该颜色是否在我第二次单击时“重置”，从而使最初的“如果”再次变为真？这似乎是行为，一旦颜色更改为 #198B07，它会在所有后续点击中保持该颜色。

知道我做错了什么吗？

这是我的代码：

脚本

<script>
    function myFunction2() {
        if (document.getElementById("test").style.background != '#198B07') {                
            document.getElementById("test").style.background = '#198B07';
        } else {
            document.getElementById("test").style.background = '#2A303C';
        }
        return false;
    }
</script>

HTML

 <button type="button" id="test" onclick="myFunction2()">Try it</button>

【问题讨论】：

document.body.style.background 检索的属性不仅仅是背景色。但即使你在我的测试中使用document.body.style.backgroundColor，它也会返回 rgb 值而不是十六进制。

标签： javascript asp.net if-statement

【解决方案1】：

style.background 不等于十六进制颜色，它返回 rgb 值。要正确比较这些，您需要更改 if 语句以比较 rgb Ie

if (document.getElementById("test").style.background != 'rgb(25, 139, 7)')

这将根据需要更改背景。以jsfiddle 为例。

【讨论】：

效果很好，有趣的是可以在“do”部分而不是“if”部分处理十六进制。非常感激。非常感谢！

【解决方案2】：

尝试使用 jquery：

    function myFunction2() {
        if ($('#test').css('background-color') != '#198B07') {                
            $('#test').css('background-color', '#198B07');
        }
        else {
            $('#test').css('background-color', '#2A303C');
        }
        return false;
    }

【讨论】：

我是 jquery / javascript 菜鸟。我在一些脚本标签之间删除了这段代码，似乎什么也没发生。
在此页面中，您将找到说明：w3schools.com/jquery/jquery_install.asp

【解决方案3】：

问题在于 HTMLElement.style.background 返回一个字符串，表示 RGB 格式的颜色。在您的情况下，为元素样式属性设置十进制颜色“#198B07”后，“document.getElementById("test").style.background' 的值将是 'rgb(25, 139, 7)'。

我建议不要直接通过 js 为元素设置样式，例如，您可以添加或删除一个类并通过 CSS 设置元素的样式，这将是一个更好且更易于维护的解决方案。

【讨论】：

逻辑听起来不错，但选择其他答案，因为我可以立即部署它。当我可以的时候，我会更深入地调查你的建议。谢谢！

【解决方案4】：

试试这个：

   function myFunction2() {
        if (document.getElementById("test").style.background !== '#198B07') {                
            document.getElementById("test").style.background = '#198B07';
        }
        else {
            document.getElementById("test").style.background = '#2A303C';
        }
        return false;
    }

【讨论】：

谢谢，得到相同的结果。第一次单击使按钮变为绿色 (#198B07)，但随后的单击使其保持绿色。