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

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充满了!important声明本身,这对于这个确切的原因是不好的做法).放下!important它会很好:

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

为此,您需要!important从现有样式中删除:

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

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