在不改变当前页面颜色模式的情况下，如何通过JavaScript获取其他主题模式下的CSS变量值？-css教程-PHP中文网

在不改变当前页面颜色模式的情况下，如何通过JavaScript获取其他主题模式下的CSS变量值？

碧海醫心

发布： 2025-03-17 08:58:18

原创

781人浏览过

在不改变当前页面颜色模式的情况下，如何通过javascript获取其他主题模式下的css变量值？

巧妙获取不同主题模式下的CSS变量值

在动态主题切换的网页开发中，我们经常需要根据不同的主题模式（例如，Bootstrap的data-bs-theme属性）来设置不同的CSS变量。本文介绍一种方法，在不修改当前页面主题的前提下，通过JavaScript获取其他主题模式下的CSS变量值。

Bootstrap的CSS代码片段示例：

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

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

登录后复制

获取当前主题CSS变量的方法很简单：

const body = document.body;
const getRealColor = () => window.getComputedStyle(body).getPropertyValue('--bs-body-color');
console.log(getRealColor());

登录后复制

然而，如何获取其他主题（例如，在浅色模式下获取深色模式的--bs-body-color）的值呢？我们需要解析CSS规则。以下代码提供了一种解决方案：

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

// 获取所有样式表
const stylesheets = Array.from(document.styleSheets);

// 存储不同主题模式下的CSS变量
const themeVariables = { light: {}, dark: {} };

// 遍历所有样式表
stylesheets.forEach(sheet => {
  try {
    // 获取CSS规则
    const rules = sheet.cssRules || sheet.rules;
    if (!rules) return;

    // 遍历规则
    Array.from(rules).forEach(rule => {
      if (rule.selectorText) {
        // 匹配主题选择器
        if (rule.selectorText === ':root' || rule.selectorText === '[data-bs-theme="light"]') {
          // 提取light主题变量
          const style = rule.style;
          for (let i = 0; i < style.length; i++) {
            const prop = style[i];
            themeVariables.light[prop] = style.getPropertyValue(prop);
          }
        } else if (rule.selectorText === '[data-bs-theme="dark"]') {
          // 提取dark主题变量
          const style = rule.style;
          for (let i = 0; i < style.length; i++) {
            const prop = style[i];
            themeVariables.dark[prop] = style.getPropertyValue(prop);
          }
        }
      }
    });
  } catch (e) {
    console.error('Error accessing stylesheet:', e);
  }
});

console.log('Theme Variables:', themeVariables);
// 访问深色模式下的 --bs-body-color: console.log(themeVariables.dark['--bs-body-color']);

登录后复制

这段代码遍历所有样式表，查找':root', '[data-bs-theme="light"]' 和 '[data-bs-theme="dark"]' 选择器，并提取对应的CSS变量，存储在themeVariables对象中。您可以根据需要访问不同主题下的变量。请注意错误处理部分，以应对可能出现的跨域或样式表访问错误。

通过这种方法，我们可以在不影响当前页面主题显示的情况下，获取其他主题模式下的CSS变量值，从而实现更灵活的主题管理和动态样式调整。

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