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结构发生变化，可能需要调整正则表达式。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
