Javascript 在引导中更改单击按钮的颜色

我正在尝试更改单击时按钮的颜色。我在引导按钮上做这件事，它是蓝色的。但是我的代码不起作用

下面是我的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>

将

中的“btnOUS”替换为
中的“btnOUS”
（小
s
）：

希望这有帮助


基本示例：


var b1=document.getElementById（“btnus”）；
b1.onclick=函数（）{
b1.style.background=“绿色”；
}

组织单位
您可以选择创建css类，只需单击即可更改该类。
请参见此功能示例：


$（“按钮”）。单击（函数（）{
$（“按钮”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
.active{
背景色：绿色！重要；
}

组织单位
酋长国
地区
设施
试试这个。其他按钮也一样。只需更改id名称

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

使用以下CSS伪选择器：

活动的：如果您只想在单击按钮时使用背景色，而不想保留



.btn.btn警告：悬停{
背景：黄色；
}
/**主动**/
.btn.btn警告：激活{
背景：红色；
}

请点击我您也可以选择两个按钮，一个是绿色的，另一个是蓝色的，并应用jquery的show和hind功能

（#蓝色）。单击（函数（）{
（#蓝色）。隐藏（）；
（#绿色）。显示（）；
})

最初，绿色按钮应该是隐藏的。
我不喜欢其他答案，因为它们要么需要
jquery
要么
！重要信息

在引导中，引导按钮的
：active
元素状态比其他元素状态指定得更多（要理解这意味着什么，）。这就是为什么您可能发现自己能够控制
：hover
的css，但却发现
：active
神秘地不起作用

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

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

我把它改成了

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

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

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

与我们联系

希望这有帮助！这只是我的个人解决方案。
$（“#btnid”）。单击（函数（）{$（this）.css（“颜色”、“绿色”）；}
请试试这个
css（）函数用于设置对象的样式。我添加了按钮的单击事件。
您能否给出更多解释Uncaught TypeError:无法将属性“onclick”设置为null我遇到了这个错误您可以看到它在这里工作，在您的示例中，您有3个同名变量，请尝试重新组织代码。这并不能回答问题。此外，我您认为应该为您在浏览器控制台中建议的任何错误提供一个示例吗？无法在
window.onload=function（）{/*此处的代码*/}中设置nullWrap所有代码的属性“onclick”
@leo.fcx请检查我的答案。@imadfookifooki如果您试图使用错误的
id
设置onclick to元素，请检查我的答案。当您单击按钮时，
active
类被分配给单击的按钮，但是首先，所有
active
类的按钮都将被清除。而不是自定义的class
active
您可以使用预定义的绿色类
btn success
。没错，但他使用的是绿色，而
btn success
类使用的是
\449D44
，这就是我的原因。
.my-button:active {
    background-color: green;
} 

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

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