在 javascript 中将背景颜色更改为原始颜色

Question

<div class="container">
    <div class="square extra" id="test"></div>
</div>

var color = document.getElementById('test');
function changeColor(){
color.style.background = "cornflowerblue";}

color.addEventListener('click', changeColor)

如何通过再次按相同的 div 将背景颜色反转为原始颜色？

Answer 1

我会创建一个带有背景颜色的 class，然后更改函数以切换 class。

请参阅下面的代码段：

var color = document.getElementById('test');

function changeColor() {
  color.classList.toggle(`bgCornflowerblue`);
}

color.addEventListener('click', changeColor)

.square {
  background: CadetBlue;
  color:white;
  padding: 5px;
}

.bgCornflowerblue {
  background: Cornflowerblue!important
}

<div class="container">
  <div class="square extra" id="test">Click me</div>
</div>

在 javascript 中将背景颜色更改为原始颜色

Change backround color to oroginal in javascript

javascript

background

toggle