在 JS 中使用引导颜色答案

【问题标题】：Using Bootstrap Colors in JS在 JS 中使用引导颜色
【发布时间】：2018-08-26 20:03:16
【问题描述】：

我正在使用 Google-Chart 并希望将切片颜色设置为引导程序使用的颜色，例如 badge-success 或 badge-danger。有没有办法从 JavaScript 中访问这些颜色代码？

【问题讨论】：

标签： javascript twitter-bootstrap google-visualization

【解决方案1】：

如果您使用的是 Bootstrap 4，则此方法有效：

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

您可以访问 :root 伪元素中的 CSS 变量

【讨论】：

工作得很好，谢谢。还尝试了$('.badge-warning').css("backgroundColor")，如果我真的需要访问某些特定的类和 CSS 功能，它也可以完成这项工作
是的 - 但您需要在拥有图表的每个页面上都有这些徽章警告元素之一。否则，该 jquery 调用将返回 undefined。
哦，我没想到。那将是一个相当大的惊喜。感谢您的提示！

【解决方案2】：

另一种方法是……

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

演示：https://www.codeply.com/go/GC96hjbf5v

【讨论】：