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结构发生变化，可能需要调整正则表达式。
