时间戳

首页 > 解决方案 > CSS 变量不会被设置 | 电子

javascript - CSS 变量不会被设置 | 电子

问题描述

我目前遇到了未设置 CSS 变量的问题，我正在使用电子，我试图像这样设置它：

  for (let Button of ThemeButtons){
    Button.addEventListener("click", e =>{
      let Color = Button.style.backgroundColor;
      let root = document.documentElement

      console.log(Color)
      root.style.setProperty('--CurrentA', Color);
      root.style.setProperty('--CurrentB', Color);
      root.style.setProperty('--CurrentC', Color);
    });
  }

我的变量定义如下：

:root {
  --red:#923333;
  --orange:#d68a00;
  --green: #0d840d;
  --blue: #1c4a90;
  --purple: #6a1d8a;
  --dark: #313131;
  --gray: rgb(68, 68, 68);
  --light: #b7b7b7;

  --CurrentC: rgb(85, 85, 85);
  --currentA: rgb(68, 68, 68);
  --currentB: rgb(53, 53, 53);
}

颜色已打印，但未设置变量。我已经看到“BlinkFeatures”并且我也启用了这些功能，但我仍然无法让它工作。有谁知道发生了什么？

标签： javascriptcsselectron

解决方案

我认为这是css特异性的问题。:root 指向文档树根（HTML 标记），document.documentElement除了 :root 具有更高的特异性（见此处）

要解决此问题，您可能应该将变量覆盖设置为例如 body 标签或更改:root {}为html {}

推荐阅读