Changing background color of Bootstrap panel body using jquery [duplicate]

Question

I have a bootstrap Panel and I managed to set the opacity of the body.

<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>

using the css as follow

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

I want to set this the color dynamically using jquery(or javascript) doing it as follow although it doesnt work.

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

How would I go about in doing this effectively?

Answer 1

jQuery ignores the !important declaration as it's simply unnecessary - an element's style attribute (which is what jQuery sets) has higher specificity than CSS can apply (unless your CSS is riddled with !important declarations itself, which is bad practice for this exact reason). Drop the !important and it will work fine:

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

For this to work you'll need to remove the !important from your existing styling:

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

If that fails to apply the style, simply increase its specificity by improving your selector's strength: div.panel-body#needsBody { ... }, for instance.

Answer 2

Try using hex instead. It worked for me.

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