如何在不改变当前主题模式下，通过JavaScript获取Bootstrap框架中其他主题模式的CSS变量值？_正则表达式

如何在不改变当前主题模式下，通过javascript获取bootstrap框架中其他主题模式的css变量值？

javascript获取bootstrap不同主题模式下的css变量

在bootstrap框架中，主题模式（例如light和dark）通过css变量控制样式。本文介绍如何在不切换主题的情况下，使用javascript获取其他主题模式下的css变量值。

bootstrap的css中，主题相关的css变量定义如下所示（示例）：

:root,
[data-bs-theme=light] {
  --bs-body-color: #212529;
}

[data-bs-theme=dark] {
  --bs-body-color: #dee2e6;
}

登录后复制

直接使用window.getcomputedstyle只能获取当前生效的css变量值。要获取其他主题模式的变量值，需要解析css规则。以下代码演示如何获取dark模式下的--bs-body-color值，而无需修改当前主题：

function getthemevariable(theme, variable) {
  const stylesheets = document.stylesheets;
  let value = null;

  for (const sheet of stylesheets) {
    try {
      for (const rule of sheet.cssrules) {
        if (rule.selectortext === `[data-bs-theme=${theme}]`) {
          const match = rule.style.csstext.match(new regexp(`${variable}:\s*(.+?);`));
          if (match) {
            value = match[1].trim();
            break;
          }
        }
      }
      if (value) break; // 找到后直接跳出循环
    } catch (error) {
      // 处理跨域或其他错误
      console.error("error accessing stylesheet:", error);
    }
  }
  return value;
}

const darkmodebodycolor = getthemevariable('dark', '--bs-body-color');
console.log('dark mode --bs-body-color:', darkmodebodycolor);

登录后复制

这段代码定义了一个函数getthemevariable，接收主题名称和变量名称作为参数，并返回对应的变量值。它遍历所有样式表，查找匹配指定主题的选择器，然后使用正则表达式提取变量值。错误处理机制也得到了增强，以便更稳健地处理潜在的样式表访问问题。通过调用getthemevariable('dark', '--bs-body-color')，即可获取dark模式下的--bs-body-color的值。

这个方法避免了直接修改页面主题，从而保持了用户体验的一致性，同时能够灵活地访问不同主题下的css变量。请注意，此方法依赖于bootstrap的css结构，如果bootstrap的css结构发生变化，可能需要调整正则表达式。

以上就是如何在不改变当前主题模式下，通过javascript获取bootstrap框架中其他主题模式的css变量值？的详细内容，更多请关注代码网其它相关文章！