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"

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

一个班级

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

再次，将myclassname替换为类的名称;同样的颜色

或者如果你想使用JQuery

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

通常，您使用多个项目的类，以及单个项目的ID。随意评论，并添加你需要的任何东西;因为我对你要问的具体细节有点不确定。

Answer 2

通过onchange上的select或按钮点击，从下拉列表中获取所选值。然后使用该值将其指定给所需元素的背景。

HTML：

<select id="bgselect" onchange="changeBg()">
    <option value="black">Black</option>
    <option value="blue">Blue</option>
    <option value="#000080">Navy Blue</option>
    ...
</select>

Javascript：

function changeBg() {
    var bg = document.getElementById("bgselect").value;
    document.getElementById("dbg").style.background = bg;
}

jsfiddle DEMO

编辑：

如果您想影响.nav.nav-tabs > li > a之类的元素，那么您需要找到所有这些元素，然后应用该样式：

function changeBg() {
    var bg = document.getElementById("bgselect").value;
    var navs = document.querySelectorAll(".nav.nav-tabs");
    var as = navs[0].getElementsByTagName('a');
    for(var i = 0; i < as.length; i++) {
        as[i].style.background = bg;
    }
}

updated jsfiddle

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

2 个答案: