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

我有一个引导面板，我设法设置了正文的不透明度。使用jquery更改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;");

如何有效地做到这一点？

来源

2015-01-05 Arianule

当你删除'！important'时会发生什么？ –

你在css属性中有一个分号';' – pistou

jQuery'.css（）'方法不处理'！important'语句 –

的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 { ... }。

来源

2015-01-05 15:52:53

CSS规则中仍然有'！important'语句 –

@ A.Wolff我偶然编辑出我的答案似乎（因为一个段落丢失，使其阅读非常混乱！）。我已经添加了它。 –

对不起，我的意思是OP在CSS中使用：'#needsBody {背景：rgba（255,255,255,0.3）！重要; }'我猜他可以从这里删除'！important'声明 –

尝试使用十六进制代替。它为我工作。

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

来源

2015-01-05 15:53:16 Neve12ende12

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

尝试使用：

$（ “＃needsBody”）的CSS（ “背景色”， “RGBA（175，201，99，0.2）”）;。

来源

2015-01-05 15:53:46 Guillaume

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

回答

相关问题