我要评论
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的值。
这个方法避免了直接修改页面主题，从而保持了用户体验的一致性，同时能够灵活地访问不同主题下的css变量。 请注意，此方法依赖于bootstrap的css结构，如果bootstrap的css结构发生变化，可能需要调整正则表达式。
以上就是如何在不改变当前主题模式下，通过javascript获取bootstrap框架中其他主题模式的css变量值？的详细内容，更多请关注代码网其它相关文章！
![如何在不使用断言的情况下匹配非[url]标签之外的@用户名？](https://images1.3wcode.com/3wcode/20250330/s_0_202503300051375916.jpg)
发表评论