JS获取Bootstrap主题CSS变量

本文介绍如何通过JavaScript获取Bootstrap不同主题模式（例如dark、light）下的CSS变量值，例如`--bs-body-color`。默认情况下JavaScript只能获取当前主题的变量值，本文提供了一种解决方案：通过XMLHttpRequest加载CSS文件，使用DOMParser解析CSS，并遍历样式规则提取指定主题模式下的CSS变量值。文章提供了具体的JavaScript函数代码示例，方便开发者根据实际CSS文件路径调用函数获取所需变量值，实现跨主题模式的CSS变量访问。

从其他主题模式获取 css 变量的值

bootstrap 使用 css 变量 (如 --bs-body-color) 来控制其组件的外观。然而，默认情况下，只能通过 js 获取当前主题模式的 css 变量值。

解决方案：解析 css

为了获取其他主题模式的 css 变量值，一种方法是解析 css 文件，从中提取变量信息。这可以通过以下步骤实现：

1. 创建一个 js 函数来加载 css 文件。
2. 使用 domparser 解析 css 文件并提取样式表。
3. 循环遍历样式表规则，并从规则中解析 css 变量。

示例代码

您可以使用以下 js 代码实现此解决方案：

function getcssvariablevalue(variablename, themename) {
  const cssfileurl = ''; // 替换为实际的 css 文件路径

  // 加载并解析 css 文件
  const xhr = new xmlhttprequest();
  xhr.open('get', cssfileurl, true);
  xhr.send();
  const stylesheets = document.adoptnode(xhr.responsexml.documentelement);

  // 从样式表中提取变量
  const rules = stylesheets.stylesheets[0].cssrules;
  for (let i = 0; i < rules.length; i++) {
    const rule = rules[i];
    if (rule.selectortext == '[data-bs-theme=' + themename + ']') {
      for (let j = 0; j < rule.style.length; j++) {
        const property = rule.style[j];
        if (property == variablename) {
          return rule.style.getpropertyvalue(property);
        }
      }
    }
  }

  return null;
}

使用

要获取其他主题模式的 css 变量值，您可以调用 getcssvariablevalue 函数，并传入变量名称和主题名称：

console.log(getCSSVariableValue('--bs-body-color', 'dark'));

到这里，我们也就讲完了《JS获取Bootstrap主题CSS变量》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！