如何使用JavaScript动态更改CSS引导样式？

我的自定义css样式表中有此样式：

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

我有一个按钮使用AngularJS ng点击：

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

---

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

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

身份证

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

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

上课

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

同样，用类的名称替换myclassname；你的颜色也一样

或者如果您想使用JQuery

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

---

通常，多个项目使用类，单个项目使用ID。请随意评论，我会为您添加任何其他需要的内容；因为我有点不确定您询问的具体内容。

通过使用

选择

上的

onchange

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

HTML:

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

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

编辑：

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

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

如果要影响

.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;
    }
}

函数更改bg（）{
var bg=document.getElementById（“bgselect”）.value；
var navs=document.queryselectoral（“.nav.nav选项卡”）；
var as=navs[0].getElementsByTagName（'a'）；
对于（变量i=0；i

---

您尚未达到问题的最低要求。请显示1）您的HTML代码片段，以及2）您试图解决此问题的方法。我可以使用：document.body.style.background=“whateverColor”更改身体背景颜色；但是，我不知道如何通过JavaScript更改任何样式，不仅仅是导航选项卡。我尝试了JQuery方法，但没有成功。我需要为活动选项卡设置类：$（“.nav.nav-tabs>li>a”）.css（“背景色”、“红色”）；这是接近我所寻找的；但是，我需要更改的样式是我的帖子中列出的样式：.nav.nav-tabs>li>a