单击时更改按钮颜色[关闭]答案

【问题标题】：Change button-color when clicked [closed]单击时更改按钮颜色[关闭]
【发布时间】：2015-08-16 06:23:57
【问题描述】：

我已经尝试了几天来找到一种方法来更改在 javascript 或 PHP 中单击时按钮的颜色。我已经有一个带有 CSS 的按钮：#btnMenu。
这是按钮：

<a href="/?nav=home"><input id="btnMenu" type="button" value="Hjem"/></a>

按钮是：background-color: grey;
当它被点击时，我希望按钮是：background-color: red;

我认为它不能在 CSS 中完成，但我可以更改背景 i javascript og PHP 吗？

【问题讨论】：

href 和输入？另外，现在/? 在根目录查找索引。
是的，我知道，但无论如何......它有效：p
“有效” - 如果有效，那么为什么要问这个问题？大声笑加，没有足够的代码
按钮可以工作，但点击时我无法更改背景颜色！！
Change Button color onClick 的可能重复项

标签： javascript php css button colors

【解决方案1】：

由于您使用a（锚点）作为按钮，因此单击页面后将刷新，因此在这种情况下要更改按钮颜色，您应该尝试以下操作：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<a href="/?nav=home"><input id="btnMenu" type="button" value="Hjem"/></a>

<script>
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}



  $(document).ready(function(){

          var param = getParameterByName('nav');
          if(param == 'home'){
              $('#btnMenu').css("background-color", "red");
          }

})
</script>

【讨论】：

【解决方案2】：

jQuery 很容易用来做这样的事情。 PHP（作为服务器端）不是为在页面加载后对其进行更改而设计的。

你可以试试这样的：

$('#btnMenu').click(function(){
   $(this).css('background-color', 'red');
});

【讨论】：

此问题未标记 [jquery]
@A1rPun 仍然，问题尚不清楚。另外，OP 确实标记为 javascript，这就是 jQuery。
@Fred-ii- OP 不知道 jQuery，所以他不知道。我可以提供一个 .NET 解决方案，因为他没有要求它。这不是 SO 的工作方式。我只是想防止对非常简单的事情产生依赖。
@A1rPun 当然，我同意，你说得有道理。然而，jQuery 解决方案仍然是一种选择。
@Fred-ii- 酷，我想我必须接受 jQuery 正在接管世界 ;)

【解决方案3】：

试试这个，

JavaScript：

    var count = 1;
    function setColor() {
        var property = document.getElementById('btnMenu');
        if (count == 0) {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }

HTML

<input id="btnMenu" type="button" value="Hjem" onclcik="setColor();"/>

【讨论】：

【解决方案4】：

试试这个

html

<a href="/?nav=home"><input id="btnMenu" type="button" value="Hjem"/></a>

Javascript

document.getElementById('btnMenu').onclick = function(){
 this.className = 'blueColor';
}

css

.blueColor{
    background:blue;
}

http://jsfiddle.net/826fhe99/2/

【讨论】：

【解决方案5】：

document.getElementById('btnMenu').onclick = function(){
 this.style.backgroundColor = "red";
}

【讨论】：

【解决方案6】：

<input type="button" id="btnMenu" value="Hjem" style="color:white" onclick="setColor()"; />

 var count = 1;
function setColor() {
    var property = document.getElementById(btnMenu);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        property.style.backgroundColor = "#7FFF00"
        count = 0;
    }
}

【讨论】：

【解决方案7】：

我不认为a 和button 是一个好的组合。但是，您可以使用此代码更改按钮的背景颜色。

document.getElementById('btnMenu').onclick = function(){
 this.style.backgroundColor = "red";
}

【讨论】：