使用 jquery 更改 Bootstrap 面板正文的背景颜色

Question

我有一个 bootstrap 面板，我设法设置了主体的不透明度。

<div class="panel panel-default" style="background:none;">
   <div class="panel-heading">What is needed to perform activity?</div>
       <div class="panel-body" id="needsBody">
            Panel content
        </div>
    </div>

使用css如下

#needsBody {
   background: rgba(255, 255, 255, 0.3) !important;
}

我想使用 jquery（或 javascript）按如下方式动态设置颜色，尽管它不起作用。

$("#needsBody").css("background", "rgba(175, 201, 99, 0.2) !important;");

我将如何有效地做到这一点？

Answer 1

jQuery 忽略 !important 声明，因为它根本没有必要 - 元素的 style 属性（这是 jQuery 设置的）比 [=24= 具有更高的特异性] 可以申请（除非你的 CSS 充满了 !important 声明本身，这是出于这个确切原因的不好的做法）。删除 !important 它将正常工作：

$("#needsBody").css("background", "rgba(175, 201, 99, 0.2)");

为此，您需要从现有样式中删除 !important：

#needsBody {
  background: rgba(255, 255, 255, 0.3);
}

如果未能应用样式，只需通过提高选择器的强度来增加其特异性：例如 div.panel-body#needsBody { ... }。

Answer 2

尝试改用十六进制。它对我有用。

$("#needsBody").css("background", "#AFC963");

Answer 3

CSS属性应该是background-color，这里不需要!important。此外，您的 CSS 属性中有一个分号。

试试：

$("#needsBody").css("background-color", "rgba(175, 201, 99, 0.2)");

使用 jquery 更改 Bootstrap 面板正文的背景颜色

Changing background color of Bootstrap panel body using jquery

javascript

css

jquery

twitter-bootstrap