在JS中存储CSS中的变量

Question

我正在为我的应用程序做一个主题选项。主题是通过电子商店存储的，并在渲染方法中应用到页面。当我用它来设计其他css元素的样式时，这个效果很好。

然而，我有一个页面是使用帆布计。据我所知，宽度不能通过CSS样式，我必须直接在渲染方法中设置颜色。

我的问题是，现在如果我能以某种方式读出当前主题的颜色，将它们存储在JS中，这样我就可以使用JS变量将颜色加载到仪表上。

现在我在我的测量页面上有一个部分，我正在为这个页面设置颜色主题，但是将所有内容存储在主题中会更方便。所以我不需要在代码的两个区域定义主题。

我themes.scss

:root {
--fillInactive: #7c7c7c;
}
[colorTheme = 'Blue'] {
--fillActive: #3f77a4;
}

Dashboard.js:

const Store = window.require('electron-store');
const store = new Store();
const theme = store.get("colorTheme");
class Dashboard extends Component {
constructor(props) {
super();
}
render() {
let colorNeedle

if(theme === 'Blue') {
colorNeedle             = '#1a80d2'
}

return <div className="dashboard" colorTheme={theme}>
<div className="dashboard__header">
</div>
<div className="dashboard__gauges">
<RadialGauge
colorNeedle = {colorNeedle}
></RadialGauge>
</div>
</div>;
}
}
export default Dashboard;

我试过了:

const element = document.getElementById('dashboard');
const attribute = element.getAttribute('var(--fillActive)');

但是我得到:Uncaught TypeError:不能读取null的属性'getAttribute'

我只是缺乏基础知识。任何帮助都是感激的!

Answer 1

要在CSS中声明一个变量，需要为变量指定一个名称，然后在前面添加两个连字符(-)作为前缀。这里的元素指的是任何可以访问这个CSS文件的有效HTML元素。

您可以在W3中查看此示例https://www.w3schools.com/css/tryit.asp?filename=trycss3_var_js