更改引导按钮颜色和类点击或悬停/焦点

Question

>

点击一个按钮，我想设置btn危险引导类。我已经在按钮上附加了一个ng click事件，因此不确定如何获得按钮的句柄并仅更改该按钮上的css。我看到的示例中有一个jquery click事件处理程序，但不确定这是否是最好的方法

请您就如何处理上述两个问题提出建议？

<div>
<br>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Create')">Create Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Update')">Update Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Activate')">Activation
    Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Deactivate')">Deactivation
    Requests
       </button>
</div>

Answer 1

你可以尝试这样做：给你想要改变css的按钮一个id，然后从你的控制器调用它。

假设您的按钮id为buttonId，则来自控制器

document.getElementById('buttonId').style.color = 'blue'
document.getElementById('buttonId').style.width = value

Answer 2

作为最佳实践，您应该覆盖引导样式（而不是直接编辑它们）。要重写引导程序的btn-主：悬停样式，请将其添加到您自己的自定义样式表中。

.btn-primary:hover {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #204d74;
}

这将覆盖btn主：焦点样式：

.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #122b40;
}

只要确保您自己的带有这些重写的样式表位于引导样式表之后。

使现代化

为了将其限制在那些按钮上，你可以给周围的div一个id="myButton"，然后css覆盖可以变成

#myButtons .btn-primary:hover {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #204d74;
}

#myButtons .btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #122b40;
}

Answer 3

<button type="button" class="btn" ng-class="{ 'btn-primary': !pendingReqCtrl.isButtonHover,  'someClass': pendingReqCtrl.isButtonHover, 'btn-danger': pendingReqCtrl.isClick" ng-mouseover="onMouseOver(true)" ng-mouseleave="onMouseOver(false)" ng-click="pendingReqCtrl.loadData('Create')">Create Requests
   </button>

function onMouseOver(isHover){
    pendingReqCtrl.isButtonHover = isHover;
 }

function loadData(){
    pendingReqCtrl.isClick= true;
}

试试这样的。