如何在不改变当前主题模式下，通过JavaScript获取Bootstrap框架中其他主题模式的CSS变量值？-css教程-PHP中文网

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

花韻仙語

发布： 2025-03-22 08:12:14

原创

313人浏览过

如何在不改变当前主题模式下，通过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的值。

立即学习“Java免费学习笔记（深入）”；

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

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