css - 是否可以指向一个类？

Question

我有一个 Vue 应用程序(一个包含多个子组件的包罗万象的元素)，我想向其添加夜间模式。我希望集中管理这种夜间模式，相关样式将应用于需要切换到夜间/白天模式的元素。

如果我有一个元素(它在 DOM 中作为已渲染组件的一部分，因此不能直接供父组件使用，因此不能通过 v-bind 绑定(bind))

<div class="night-day">hello</div>

和两个类

.night {
  background-color: black;
  color: red
}

.day {
  background-color: white;
  color: black
}  

是否可以让 night-day 指向 day 或 night(取决于某些条件)？

Answer 1

您可以考虑使用您在 JS 代码中更改的 CSS 变量 (setinterval)。基本上你会有这样的东西:

<div class="night-day">hello</div>


.night-day {
  background-color: var(--bc,black);
  color: var(--c,red)
}

在你的 JS 中你会有这样的东西:

var bc= ["black", "white"]
var c= ["red", "black"]

....
document.querySelector('.night-day').style.setProperty("--bc", bc[i]);
document.querySelector('.night-day').style.setProperty("--c",  c[i]);

...

其中 i 是一个索引，您可以根据自己的条件更改: