如何在JS中添加和删除类？

Question

我一直在尝试用JS做一个简单的练习.一个盒子,可以在所有方向上将背景颜色从白色变为蓝色或变为紫色,也可以从紫色变为蓝色等.这是正在工作的代码,例如.我不明白为什么最后的蓝色:function()也有效.我用"尝试和检查方法"自己写了一切.也许有人可以用真正正确的方式(最简单的方式)重写代码.

<style>
    #box {
      width: 50px;
      height: 50px;
      border: 3px black solid;
    }
    .purple {
      background: purple;
    }
    .blue {
      background: blue;
    }
    .white {
      background: white;
    }
</style>

<div id="box"></div>
<div>
    <button onclick="colorChanger.white()">White </button>
    <button onclick="colorChanger.purple()">Purple </button>
    <button onclick="colorChanger.blue()">Blue </button>
</div>

和JS:

var background = document.getElementById("box");
var colorChanger = {
   white: function() {
    (background.classList.remove("blue") || background.classList.remove("purple")) 
   },
  purple: function() {
  (background.classList.remove("blue") || background.classList.remove("white")) & background.classList.add("purple");
  },
  blue: function() {
    background.classList.add("blue");
  }
};

工作脚本在这里:https://codepen.io/hubkubas/pen/LJNKoJ？editors = 1010

感谢您的帮助和建议.

Answer 1

我会让这更简单.

简单,有效.你有效地覆盖旧类newClass.这种方法的市长好处:如果你有很多颜色,你不需要很多功能.
_{注意:如果你想要保留的元素上有一个类,你可以data-styling在JS/CSS中使用和设置它}

var background = document.getElementById("box");

var colorChanger = {
  changeTo: function(newClass) {
    background.className = newClass;
  }
};

#box {
  width: 150px;
  height: 150px;
  border: 3px black solid;
  transition: all 0.5s; /* just for fun */
}
.purple {
  background: purple;
}
.blue {
  background: blue;
}
.white {
  background: white;
}
.goldWithSomePrettyGlow {
  background-color: gold;
  box-shadow: 0 0 5px 5px red;
}

<div id="box"></div>
<div>
    <button onclick="colorChanger.changeTo('purple')">purple </button>
    <button onclick="colorChanger.changeTo('blue')">blue </button>
    <button onclick="colorChanger.changeTo('white')">White </button>
    <button onclick="colorChanger.changeTo('goldWithSomePrettyGlow')">goldWithSomePrettyGlow </button>
</div>