在 css 中使用 data-theme 变量值-解网

问：

我想在 data-theme 属性中存储颜色的十六进制值，例如

    document.body.setAttribute("data-theme", "#a20000")

如何在CSS文件中使用此值，如下所示

    body[data-theme] {
      ---theameColor: "data-theme";
    }

我想创建一个变量，该变量将用于设置所有其他类的样式。

我尝试了这种方法，但它不起作用

body[data-theme] {
  ---theameColor: "data-theme";
}

javascript css reactjs 颜色

评论

0赞 Heretic Monkey 11/16/2023

这回答了你的问题吗？如何使用 JS 编辑 CSS 变量？

0赞 Heretic Monkey 11/16/2023

您也可以尝试使用 attr（），但支持非常有限。

答：

0赞 Harrison 11/16/2023 #1

我不认为你可以完全按照你描述的方式做到这一点，但它可以通过使用设置的变量并在何时更改变量值来实现。:root

function setDarkTheme() {
  document.body.setAttribute("data-theme-dark", "");
}

:root {
  --theme-color: #f1f2f3;
  --text-color: #000000;
}

body[data-theme-dark] {
  --theme-color: #494d50;
  --text-color: #FFFFFF;
}

body {
  background: var(--theme-color);
  color: var(--text-color)
}

<body>
  <div>Hello world</div>
  <button type="button" onclick="setDarkTheme();">Set dark theme</button>
</body>

我可能会推荐一种更具声明性的方法，其中您可以（理论上）有许多主题。请注意，如果没有匹配的主题（例如“浅色”主题），CSS 将如何默认为标准值

function setDarkTheme() {
  document.body.setAttribute("data-theme", "dark");
}

function setLightTheme() {
  document.body.setAttribute("data-theme", "light");
}

function setRedTheme() {
  document.body.setAttribute("data-theme", "red");
}

:root {
  --theme-color: #f1f2f3;
  --text-color: #000000;
}

body[data-theme="dark"] {
  --theme-color: #494d50;
  --text-color: #FFFFFF;
}

body[data-theme="red"] {
  --text-color: #FF0000;
}

body {
  background: var(--theme-color);
  color: var(--text-color)
}

<body>
  <div>Hello world</div>
  <button type="button" onclick="setDarkTheme();">Set dark theme</button>
  <button type="button" onclick="setLightTheme();">Set light theme</button>
  <button type="button" onclick="setRedTheme();">Set red theme</button>
</body>

1赞 Morgan Mastrangelo 11/16/2023 #2

是的，在 CSS 中使用是最好的方法。:root

:root {
  --data-theme: #a20000;
}

div {
  background-color: var(--data-theme);
}

如果你想使用CSS设置属性值，那是不可能的，也不是正确的编程方式。在 CSS 中，不能直接设置 HTML 元素的属性值。CSS 主要用于样式和布局目的。属性值通常在 HTML 标记本身中设置。你可以用 Javascript 来做。

但我想知道你为什么会遇到这种问题。😉

上一个：如何使用javascript和css通过保持适合屏幕视图来调整视图长度

下一个：顺风：如何瞄准 div 子的最后一个 ul？