javascript - 如何使用css变量颜色和js改变div背景

Question

所以这是一个非常基本的函数(为我的目的找到和编辑)，它将 div 背景颜色交替为白色或黑色。

我想更改代码以利用根属性中的 css 变量，而 html 中没有 onClick 函数。我想将 html 和 js 分开，但我不知道该怎么做。

我可以有两个按钮可以在 div 的 css 变量颜色之间切换吗？

谢谢。

function changeColor(color) {
  var element = document.getElementById('box');
  element.style.backgroundColor = color;
}

root {
  --white { color: #fff}
  --black { color: #000}
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  background-color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>

<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>

Answer 1

您可以设置一个 css 变量并单击更改颜色。

使用 document.body.style.setProperty('--main-color',color) 将颜色设置为 var

function changeColor(color) {
  document.body.style.setProperty('--main-color',color)
}

root {
  --main-color{ color: #fff}
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #aaa;
  background-color: var(--main-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id="box">
</div>

<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>