Javascript 如何使用css变量颜色和js更改div背景_Javascript_Html_Css

Javascript 如何使用css变量颜色和js更改div背景

javascript html css

Javascript 如何使用css变量颜色和js更改div背景,javascript,html,css,Javascript,Html,Css,因此，这是一个非常基本的函数（为我的目的而找到并编辑），它将div背景色交替为白色或黑色我想更改代码以利用root属性中的css变量，并且在html中没有onClick函数。我想把html和js分开，但我不知道该怎么做我可以有两个按钮，可以为div在css变量颜色之间切换吗多谢各位函数更改颜色（颜色）{ var元素=document.getElementById（'box'）； element.style.backgroundColor=颜色； } 根目录{ --白色{颜色：#fff}

因此，这是一个非常基本的函数（为我的目的而找到并编辑），它将div背景色交替为白色或黑色

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

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

多谢各位

函数更改颜色（颜色）{
var元素=document.getElementById（'box'）；
element.style.backgroundColor=颜色；
}

根目录{
--白色{颜色：#fff}
--黑色{颜色：#000}
}
.盒子{
宽度：100px；
高度：100px；
边框：1px实心#aaa；
背景色：#fff；
}


白色
黑色

您可以设置一个css变量，然后单击“更改颜色”

使用

document.body.style.setProperty（'--main color'，color）

将颜色设置为var

函数更改颜色（颜色）{
document.body.style.setProperty（'--main color'，color）
}

根目录{
--主色{color:#fff}
}
.盒子{
宽度：100px；
高度：100px；
边框：1px实心#aaa；
背景色：var（--主色）；
}


白色
黑色

在这些按钮上注册一个onClick事件（您必须为它们分配一个唯一的ID才能正确引用它们）

例如：

document.getElementById("myBtn").addEventListener("click", changeColor("white"));

编辑

我看到您正在使用jQuery，所以：

$("#myBtn").on( "click", function() {
  changeColor("white");
});

这样你的HTML就没有JS了。您将有两个事件，每个按钮一个。

您可以向按钮添加一个

数据颜色属性，该属性指定单击给定按钮时要更改的颜色（变量）。然后，您可以使用类color btn
将单击
事件侦听器添加到所有按钮。然后，当您单击给定按钮时，将调用事件侦听器，它将从单击的按钮获取数据属性，然后使用changeColor
函数将div更改为适当的颜色（使用变量）
此外，您还没有正确定义变量。首先，您需要使用：root
以根目录为目标。然后您需要使用--variableName:COLOR
设置变量。最后，在changeColor
函数中，您需要使用.style.backgroundColor=“var（-“+color+””）
来正确使用变量
请参见下面的工作示例

[…document.getElementsByClassName（“color btn”）].forEach（elem=>{
元素addEventListener（'click'，函数（）{
const btnColor=this.getAttribute（'data-color'）；
变色（btnColor）；
});
})
功能更改颜色（颜色）{
var元素=document.getElementById（'box'）；
element.style.backgroundColor=“var（-“+color+”）；
}
：根目录{
--w:#fff；
--b:#000；
}
.盒子{
宽度：100px；
高度：100px；
边框：1px实心#aaa；
背景色：#fff；
}

白色
黑色

：根
{
--白色：#fff；
--黑色：黑色；
}
.盒子
{
宽度：100px；
高度：100px；
边框：1px实心#aaa；
}
功能更改颜色（颜色）
{
var元素=document.getElementById（'box'）；
var style=getComputedStyle（document.querySelector（':root'）；
element.style.backgroundColor=style.getPropertyValue（'--color-'+color）；
}
白色
黑色
你想访问css属性吗？@Maheer-Ali这是我的问题，是的。另外，在使用css变量更改div的颜色时从html中删除js bgI不想在htmlyou中使用js意味着您不想使用函数？但是你必须知道你很快就能做到这一点，这对我来说似乎是一个很好的例子。非常感谢。
<!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>