如何使用CSS可变颜色和JS改变DIV背景

问题描述 投票:1回答:4

因此,这是交替的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>
javascript html css
4个回答
1
投票

您可以在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>

3
投票

您可以设置一个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>

0
投票

注册这些按钮onClick事件(你将有一个唯一的ID分配给他们适当地引用它们)

例:

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

编辑

我看到你使用jQuery,所以:

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

这样,你的HTML没有JS在里面。您将有2个事件,每一个按钮。


0
投票
<!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>

推荐问答