Getting bootstrap background color of a style

Question

I'm trying to read the background color set by bootstrap in the alert box.

var qc = $(".alert-primary").css("background-color");

This returns undefined. How should I get its value?

probably a dupe, here you go https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript — ZzCalvinzZ, Apr 20 '18 at 15:12
Working as expected for me. You sure some other code isn't interfering or you're trying to target a class that is loaded outside the DOM without a listener? See: https://www.bootply.com/36vcaTAgHE — Robert, Apr 20 '18 at 15:19
Working for me, may be you are not including jQuery or using this code before jQuery loads.. — Abhishek Mishra, Apr 20 '18 at 15:22

Sagar Kharche · Answer 1 · 2018-04-20T15:29:13.553

0

Your doing it perfectly right you can also do as follows:-

$(".alert-primary")[0].style.backgroundColor

or

var qc = $(".alert-primary").css("background-color");

I think your not getting $(".alert-primary") object. Please make sure $(".alert-primary") is getting the correct element, which has background-color.

edited Apr 20 '18 at 15:29

answered Apr 20 '18 at 15:11

Sagar Kharche

"Uncaught TypeError: Cannot read property 'style' of undefined", but bootstrap is there. Let me try it in a ready(). – Michael Chourdakis Apr 20 '18 at 15:14
That means you don't have element with .alert-primary class in DOM. – Sagar Kharche Apr 20 '18 at 15:18
But I am able to use alert-primary in a div ... weird. – Michael Chourdakis Apr 20 '18 at 15:21

score 0 · Accepted Answer · answered Apr 22 '18 at 11:50

I found the issue, the selection works only after I 've created a DOM element with that class.

This works:

<div class="alert alert-info">hello</div>
<script>
   var aa = $(".alert-info").css("background-color");
   alert(aa);
</script>

Without the first line, it doesn't work.

2 Answers2