在引导程序中更改单击按钮的颜色答案

【问题标题】：Changing the Color of button on Click in bootstrap在引导程序中更改单击按钮的颜色
【发布时间】：2016-03-12 17:30:16
【问题描述】：

我正在尝试更改 click 按钮的颜色。我在蓝色的 Bootstrap 按钮上执行此操作。但是我的代码不起作用。

在我的 JavaScript 代码之后，它不会改变颜色。

<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Units </button>
</button>

<button type="button" id="btnchiefdom" class="btn btn-primary" ng-click="levelCD()">Chiefdom</button>
</button>

<button type="button" id="btndistrict" class="btn btn-primary" ng-click="levelD()">District </button>
</button>

<button type="button" id="btnfaciltiy" class="btn btn-primary" ng-click="levelF()">Facility </button>
</button>

这里是javascript代码：

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

【问题讨论】：

浏览器控制台有错误吗？
无法设置属性“onclick”为空
将所有代码包装在window.onload=function(){/*your code here*/}
@leo.fcx 请检查我的答案。
@imadfookifooki 您收到此错误是因为您尝试将 onclick 设置为具有错误 id 的元素，请查看我的答案。

标签： javascript jquery css angularjs twitter-bootstrap

【解决方案1】：

查看这个功能示例：

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});

.active {
  background-color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Unitss </button>
            <button type="button" id="btnchiefdom" class="btn btn-primary" ng-click="levelCD()">Chiefdom</button>
            <button type="button" id="btndistrict" class="btn btn-primary" ng-click="levelD()">District </button>
            <button type="button" id="btnfaciltiy" class="btn btn-primary" ng-click="levelF()">Facility </button>

【讨论】：

当你点击按钮时，active 类被分配给被点击的按钮，但是首先，所有带有active 类的按钮都会被清除。
您可以使用预定义的绿色类btn-success，而不是自定义类active。
没错，但是他用的是绿色，而btn-success类用的是#449D44，这就是我的理由。

【解决方案2】：

我不喜欢其他答案，因为它们要么要求 jquery 要么 !important

在引导程序中，引导按钮的:active 元素状态比其他元素状态更明确（要了解这意味着什么，see here）。这就是为什么你可能会发现自己能够控制:hover 的css，但发现:active 神秘地不起作用。

我解决这个问题的方法是简单地增加我的 css 类的特异性。例如：

.my-button:active {
    background-color: green;
}

我改成

.my-button:not(:disabled):not(:disabled):active {
   background-color: green;
}

这使它与引导程序btn:active 具有同等的特异性。然后我确保我的自定义类首先出现在排序中。

<a href="foobar" class="my-button btn btn-primary btn-lg">Connect with Us</a>

希望这会有所帮助！只是我个人的解决方案。

【讨论】：

【解决方案3】：

将"btnOUS" 替换为"btnOUs"（小s）：

var b1 = document.getElementById("btnOUS");
_______________________________________^

希望这会有所帮助。

基本示例：

var b1 = document.getElementById("btnOUs");

b1.onclick = function() {
  b1.style.background = "green";  
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Units </button>

【讨论】：

能不能多解释一下
Uncaught TypeError: Cannot set property 'onclick' of null 我收到此错误
你可以看到它在这里工作，在你的例子中你有3个同名的变量，请尝试重新组织你的代码。

【解决方案4】：

试试这个。其他按钮也一样。只需要更改id名称

 $("#btnfacility").click(function () {
            $(this).css({"background-color":"green !important"});
        });

【讨论】：

【解决方案5】：

使用以下 CSS 伪选择器：

active ：如果您希望仅在单击按钮时使用背景颜色并且不想保留。

btn.btn-primary:active
{
    background-color:grey !important; /* add here any color */
}

  
    
    .btn.btn-warning:hover{
        background: yellow;
    }
    
    /** on active **/
    
   .btn.btn-warning:active{
        background: red;
    }

<div class="col-sm-12" id="my_styles">
         <button type="submit" class="btn btn-warning" id="1">Click me please!!</button>

reference

【讨论】：

【解决方案6】：

您可以选择创建 css 类并在点击时简单地更改类。

【讨论】：

这没有回答问题。另外，我认为您应该为您建议的替代方案提供一个示例

【解决方案7】：

你也可以选择两个按钮，一个是绿色的，另一个是蓝色的，并应用 jquery 的显示和后功能。

(#blue).click(function(){ (#blue).hide(); (#green).show(); })

最初#green 按钮应该是隐藏的。

【讨论】：

【解决方案8】：

$("#btnid").click(function (){ $(this).css("color","green"); } 请试试这个 css() 函数用于设置对象的样式。我添加了按钮的点击事件。

【讨论】：

【解决方案9】：

您可以使用引导按钮类来更改按钮的颜色。

$('.btn-success').on("click",function(){
    $(".btn-success").removeClass('btn-danger');
    $(this).addClass("btn-danger");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
  <button class="btn btn-success">Button 1</button>
  <button class="btn btn-success">Button 2</button>
  <button class="btn btn-success">Button 3</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

【讨论】：