javascript - 如何使用 JavaScript 动态更改 CSS Bootstrap 样式？

Question

我的自定义 CSS 样式表中有这种样式:

.nav.nav-tabs > li > a {
    background-color: #c6dfff;
    margin-right: 5px;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    color: black;
}

我有一个使用 AngularJS ng-click 的按钮:

<button type="button" class="btn btn-primary" ng-click="changeColor()">Change Color</button>

当用户点击按钮时，它会调用 changeColor 方法:

            $scope.changeColor= function () {
                // Change Color Here
            }; 

我想将上面列出的样式的背景色动态更改为不同的颜色。

Answer 1

好吧，所以如果你想使用 javascript，你可以使用两种方法之一。第一种是为对象分配一个 ID，或者如果有多个对象，您将使用一个类。

一个ID

document.getElementById("myId").style.backgroundColor="yourcolor"

用你想要的颜色替换你的颜色，用对象的 ID 替换 myID。如果您有多个具有相同类的对象，

一个类(class)

document.getElementsByClassName("myclassname").style.backgroundColor="yourcolor"

再次，用类名替换myclassname；你的颜色也一样

或者如果你想使用 JQuery

$(".myclassname").css("background-color", "your color");

通常，您对多个元素使用类，对单个元素使用 ID。随时发表评论，我会添加您需要的任何其他内容；因为我不太确定您要问的具体内容。