Using Bootstrap Colors in JS

Question

I am using a Google-Chart and want to set the slice colors to the color used by bootstrap, e.g., for badge-success or badge-danger. Is there any way to access these color-codes from within JavaScript?

Volturno

Answer 1

This works if you're using Bootstrap 4:

const root = document.querySelector('html');
getComputedStyle(root).getPropertyValue('--danger');

You can access the CSS variables present in the :root pseudoelement

Etka

Working nicely thanks. also tried $('.badge-warning').css("backgroundColor") which does the job too if I really need to access some specific class and CSS feature – Volturno

Yes - but you'd need to have one of those badge-warning elements on every page where you have the chart. Otherwise that jquery call will return undefined. – Etka

Oh, I didn't think about that. That would've been quite a surprise. Thanks for the hint! – Volturno

Answer 2

Another approach is...

document.body.innerHTML += '<div id="myBadge" class="badge-danger"></div>';
var elem = document.getElementById("myBadge");
var dangerColor = window.getComputedStyle(elem).getPropertyValue("background-color");
elem.parentNode.removeChild(elem);

Demo: https://www.codeply.com/go/GC96hjbf5v

Electrode