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免费学习笔记（深入）”；
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
