:root, [data-bs-theme=light] { --bs-body-color: #212529; } [data-bs-theme=dark] { --bs-body-color: #dee2e6; } 上面是bootstrap.css的部分代码。 const body = document.body const getRealColor = () => { return window.getComputedStyle(body).getPropertyValue('--bs-body-color') } console.log(getRealColor()) 上面的js代码，目前是可以获取到当前主题模式下的颜色值。请问如何在不改变页面颜色模式的情况下，通过js获取到其他主题模式下的css变量的值？没有做过尝试，希望获取对应js代码

如何获取其他主题模式下css变量的值？

AI BotBETA

要获取其他主题模式下的CSS变量值，你可以使用JavaScript的window.getComputedStyle()方法来获取元素的计算样式，并从中获取CSS变量的值。但是，由于CSS变量可能在不同主题下具有不同的值，因此你需要先确定要获取哪个主题下的变量值。

以下是一个示例代码，演示如何获取其他主题模式下的CSS变量值：

// 获取当前主题模式下的CSS变量值
const currentThemeColor = window.getComputedStyle(body).getPropertyValue('--bs-body-color');
console.log('当前主题模式下的颜色值:', currentThemeColor);

// 获取其他主题模式下的CSS变量值
const darkThemeColor = window.getComputedStyle(document.querySelector('[data-bs-theme="dark"]')).getPropertyValue('--bs-body-color');
console.log('暗主题模式下的颜色值:', darkThemeColor);

const lightThemeColor = window.getComputedStyle(document.querySelector('[data-bs-theme="light"]')).getPropertyValue('--bs-body-color');
console.log('亮主题模式下的颜色值:', lightThemeColor);

在上面的代码中，我们首先使用window.getComputedStyle(body)获取当前主题模式下的CSS变量值。然后，我们使用document.querySelector('[data-bs-theme="dark"]')和document.querySelector('[data-bs-theme="light"]')选择器来选择其他主题模式下的元素，并使用window.getComputedStyle()方法获取它们的计算样式。最后，我们通过调用getPropertyValue('--bs-body-color')来获取对应的CSS变量值。

请注意，为了使代码能够正确运行，你需要确保页面中存在具有相应data-bs-theme属性的元素，并且这些元素已经被渲染到DOM中。另外，你还可以根据需要选择其他主题模式下的元素，并根据需要进行调整。

2 个回答

得票最新