内联更改引导活动选项卡颜色答案

【问题标题】：Changing bootstrap active tab color inline内联更改引导活动选项卡颜色
【发布时间】：2016-09-14 03:42:24
【问题描述】：

这是我的问题，我正在尝试从自定义样式表中的类设置引导选项卡的活动颜色。我打算使用的有问题的css类如下：

{
  font: 9pt Tahoma;
  color: #000000;
  border: solid 1px #A8A8A8;
  padding: 3px 12px 4px 12px;
  background-color: red;
  text-align: center;
}

这就是有趣的地方。当页面发布给客户端时，每个客户端都已经有一个自定义 CSS 文件（这是一个更新版本），具有不同的值 - 与上面的 CSS 类在结构上相同（显然除了值之外）。这意味着我不能向 CSS 文件添加更多属性，并且我所做的任何修改都将在 .aspx 中完成，因此它们将适用于每个客户端。

所以我的挑战是将选项卡的活动颜色更改为 CSS 文件中的颜色，在这种情况下它将是：background-color: red

在这种情况下实际上并不适用的简单解决方案是添加另一个具有以下内容的类：

.nav-pills > li.active > a{
color: red;
}

正如我所提到的，这不适用于这种情况。

我曾考虑尝试在 DOM 加载时使用 JQuery 读取背景颜色，但我不确定我将如何去做。

任何指导都会很棒！即使只是告诉我这是不可能的。

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

您可以使用 jQuery css() 方法读取元素的任何 css 属性，然后再次设置属性。

https://api.jquery.com/css/

获取：

var theColor = $('.myElement').css("color");

设置：

$('.myElement').css("color", "newColor");

【讨论】：

【解决方案2】：

要使用任何 jQuery 的功能（如 CSS），您需要等待 DOM 加载，即您的浏览器完成加载 HTML 并 100% 呈现元素。

您必须使用 jQuery 的 Selectors 规则来查找 DOM-Nodes，它表示作为对象找到的元素。有了手中的节点，您就可以使用它。

你必须这样做：

// Wait for DOM load
$(document).ready(function() {

    // Getting element by ID and it's color
    var color = $("#my_element_ID").css("color");

    // Setting a color to a group of elements within some rule..
    $("#container div.some_class").css("color", "#FF0000");
});

更多关于 jQuery 的“.ready()”特性官方文档： https://api.jquery.com/ready/

有关 CSS 文档的更多信息： https://api.jquery.com/css/

有关选择器文档的更多信息： https://api.jquery.com/category/selectors/

【讨论】：