Changing background color of Bootstrap panel body using jquery

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?

jQuery `.css()` method doesn't handle `!important` statement — A. Wolff, Jan 05 '15 at 15:54

James Donnelly · Accepted Answer · 2015-01-05T15:58:54.070

7

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.

edited Jan 05 '15 at 15:58

answered Jan 05 '15 at 15:52

James Donnelly

126,410
34
208
218

1

Still have `!important` statement in CSS rule – A. Wolff Jan 05 '15 at 15:56
@A.Wolff I'd accidentally edited that out of my answer it seems (as a paragraph was missing, making it very confusing to read!). I've added it back in. – James Donnelly Jan 05 '15 at 15:58
Sorry, i meant OP is using in CSS: `#needsBody { background: rgba(255, 255, 255, 0.3) !important; }` I guess he could just remove the `!important` statement from here too – A. Wolff Jan 05 '15 at 15:59
@A.Wolff ah, I hadn't noticed that at all! I'll add that in now. – James Donnelly Jan 05 '15 at 15:59
I removed the !important rule and now it fine...excellent! – Arianule Jan 05 '15 at 16:25

score 1 · Answer 2 · answered Jan 05 '15 at 15:53

1

Try using hex instead. It worked for me.

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

answered Jan 05 '15 at 15:53

Neve12ende12

1,154
4
17
33

score 1 · Answer 3 · answered Jan 05 '15 at 15:53

1

The CSS property should be background-color and the !important is not needed here. Also, you have a semicolon in your CSS property.

Try with:

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

answered Jan 05 '15 at 15:53

255kb - Mockoon

6,657
2
22
29

Changing background color of Bootstrap panel body using jquery

3 Answers3