Question

我一直在尝试用JS做一个简单的练习。可以将背景颜色从白色更改为蓝色或紫色，但也可以在所有方向上从紫色更改为蓝色的框。这是有效的代码，例如。我不明白为什么最后一个blue：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>

Answer 2

您的blue类代码可以正常工作，因为从未在您的代码white类中添加过代码。而且无论何时添加blue类，无论是否存在purple类，它都具有较高的优先级，因为哪个blue类可以工作。

此外，您可以按照以下步骤简单地编写代码

function colorChanger(color) {
  var background = document.getElementById("box");
  background.className  = ""; // Remove all color classes
  background.classList.add(color); // Add clicked color class
}

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

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

请注意，我建议使用Martin's answer来进一步简化代码，即

从

更新

  background.className = ""; // Remove all color classes
  background.classList.add(color); // Add clicked color class

到

background.className = color;

Answer 3

您需要添加jQuery库以使其变得简单。下面是一个演示-

var colorChanger = function (color) {
  $('#box').removeClass().addClass(color);
};

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <div id="box"></div>
  
  <div>
    <button onclick="colorChanger('white')">White </button>
    <button onclick="colorChanger('purple')">Purple </button>
    <button onclick="colorChanger('blue')">Blue </button>
  </div>
</body>

</html>

Answer 4

对我来说，上课并不是最好的选择。

数据属性更有意义，基于ID的样式也不适合我，因此我改用了名为nice-box的类名，这使得使用数据属性更加有意义，因为如果您只清除课程，则会破坏样式。

下面是一个例子。

var background = document.getElementById("box");

function toggle(color) {
  background.dataset.boxColor = color;
}

var colorChanger = {
  white: function() { toggle("white"); },
  purple: function() { toggle("purple"); },
  blue: function() { toggle("blue"); }
};

[data-box-color=purple] {
  background: purple;
}
[data-box-color=blue] {
  background: blue;
}
[data-box-color=white] {
  background: white;
}
.nice-box {
  width: 50px;
  height: 50px;
  border: 3px black solid;
}

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

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

4 个答案: