因此，这是交替的DIV背景颜色为白色或黑色的一个非常基本的功能（发现和编辑我的目的）。
我想修改代码，利用CSS变量我在root属性，并具备HTML中没有的onClick功能。我想保持HTML和JS独立的，但我不知道如何去了解这一点。
我可以有两个按钮，可以在CSS可变颜色的DIV之间切换？
谢谢。
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>您可以在data-color属性添加到您的按钮指定颜色（变量）来改变给定的按钮点击时。然后您可以将click事件监听器添加到与类color-btn所有的按钮。然后，当你点击一个按钮，给事件监听器将被调用，从按钮点击，将得到的数据属性，然后用你的changeColor功能（使用变量）的div来更改为相应的颜色。
此外，你还没有正确定义的变量。首先，您需要使用root为目标的:root。然后你娘家使用--variableName: COLOR设置您的变量。最后，在你的changeColor功能，你需要使用.style.backgroundColor = "var(--" +color +")"正确使用变量。
见下面工作示例
[...document.getElementsByClassName("color-btn")].forEach(elem => {
elem.addEventListener('click', function() {
const btnColor = this.getAttribute('data-color');
changeColor(btnColor);
});
})
function changeColor(color) {
var element = document.getElementById('box');
element.style.backgroundColor = "var(--" +color +")";
}:root {
--w: #fff;
--b: #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 class="color-btn" data-color='w'>white</button>
<button class="color-btn" data-color='b'>black</button>您可以设置一个CSS变量和的onclick改变颜色。
使用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>注册这些按钮onClick事件（你将有一个唯一的ID分配给他们适当地引用它们）
例：
document.getElementById("myBtn").addEventListener("click", changeColor("white"));
编辑
我看到你使用jQuery，所以：
$("#myBtn").on( "click", function() {
changeColor("white");
});
这样，你的HTML没有JS在里面。您将有2个事件，每一个按钮。
<!DOCTYPE html>
<html>
<head>
<style>
:root
{
--color-white:#fff;
--color-black:black;
}
.box
{
width: 100px;
height: 100px;
border: 1px solid #aaa;
}
</style>
<script>
function changeColor(color)
{
var element = document.getElementById('box');
var style = getComputedStyle(document.querySelector(':root'));
element.style.backgroundColor = style.getPropertyValue('--color-' + color);
}
</script>
</head>
<body>
<div class="box" id="box">
</div>
<button onClick=changeColor('white')>white</button>
<button onClick=changeColor('black')>black</button>
</body>
</html>