Question

我有一个引导面板，我设法设置了身体的不透明度。

<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设置的）具有比CSS更高的特异性（除非你的CSS充满{{1}声明本身，这是出于这个原因的不良做法）。删除!important，它将正常工作：

!important

为此，您需要从现有样式中删除$("#needsBody").css("background", "rgba(175, 201, 99, 0.2)");：

!important

如果无法应用该样式，只需通过提高选择器的强度来增加其特异性：例如#needsBody { background: rgba(255, 255, 255, 0.3); }。

Answer 2

尝试使用十六进制代替。它对我有用。

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

Answer 3

CSS属性应为background-color，此处不需要!important。此外，CSS属性中有分号。

尝试：

$（＆＃34;＃needsBody＆＃34;）。css（＆＃34; background-color＆＃34;，＆＃34; rgba（175,201,99,0.2）＆＃34;）; < / p>

使用jquery更改Bootstrap面板主体的背景颜色

3 个答案: