JavaScript读取Bootstrap主题CSS变量
Bootstrap利用CSS变量(custom properties)来管理不同主题模式（例如light和dark）下的颜色值。本文探讨如何在不改变当前页面主题的情况下，通过JavaScript获取其他主题模式下的CSS变量值。
直接使用window.getComputedStyle只能获取当前应用的样式值。要获取其他主题模式的变量值，需要解析CSS文件内容。假设Bootstrap CSS内容已加载到名为cssContent的字符串变量中，例如：
:root,
[data-bs-theme=light] {
--bs-body-color: #212529;
}
[data-bs-theme=dark] {
--bs-body-color: #dee2e6;
}
我们可以使用正则表达式提取特定主题模式下的变量值：
function getThemeColor(cssContent, themeSelector, variableName) {
const regex = new RegExp(`${themeSelector}\\s*\\{\\s*--${variableName}\\s*:\\s*([^;]*)\\s*;`);
const match = cssContent.match(regex);
return match ? match[1].trim() : null;
}
const cssContent = `
:root,
[data-bs-theme=light] {
--bs-body-color: #212529;
}
[data-bs-theme=dark] {
--bs-body-color: #dee2e6;
}
`;
const lightColor = getThemeColor(cssContent, '[data-bs-theme=light]', 'bs-body-color');
const darkColor = getThemeColor(cssContent, '[data-bs-theme=dark]', 'bs-body-color');
console.log('Light theme color:', lightColor); // 输出: #212529
console.log('Dark theme color:', darkColor); // 输出: #dee2e6
getThemeColor函数接收CSS内容、主题选择器（例如'[data-bs-theme=light]'）和变量名作为参数，返回匹配的变量值。 该方法通过正则表达式匹配CSS规则，并提取变量值。如果没有找到匹配项，则返回null。 这种方法可以有效地从CSS字符串中提取不同主题模式下的CSS变量值，而无需修改页面样式。 需要注意的是，实际应用中需要获取真实的Bootstrap CSS内容，而不是像示例中那样直接定义一个字符串。
立即学习“Java免费学习笔记（深入）”；
