js利用传参实现单个盒子的切换样式

可以使用以下代码实现：

HTML:

<div id="box"></div>
<button onclick="changeStyle('box')">切换样式</button>

JavaScript:

function changeStyle(id) {
  var box = document.getElementById(id);
  if (box.classList.contains('style1')) {
    box.classList.remove('style1');
    box.classList.add('style2');
  } else {
    box.classList.remove('style2');
    box.classList.add('style1');
  }
}

CSS:

.style1 {
  background-color: red;
  width: 100px;
  height: 100px;
}

.style2 {
  background-color: blue;
  width: 100px;
  height: 100px;
}

这段代码会在页面上创建一个红色的正方形盒子，点击按钮后会切换盒子的样式为蓝色。

相关问题

js利用传参实现单个id切换样式

可以使用以下代码实现：

function toggleClass(id, className) {
  var element = document.getElementById(id);
  if (element.classList.contains(className)) {
    element.classList.remove(className);
  } else {
    element.classList.add(className);
  }
}

在 HTML 中，可以这样使用：

<button onclick="toggleClass('myId', 'active')">Toggle class</button>
<div id="myId">This element can have its class toggled</div>

当点击按钮时，`toggleClass` 函数会将 `myId` 元素的 `active` 类切换开关。

js实现单个按钮切换三种颜色

可以通过JavaScript代码来实现单个按钮切换三种颜色的效果，具体代码如下：

<button id="colorBtn" onclick="changeColor()">点击切换颜色</button>

var colors = ["red", "green", "blue"];
var currentColor = 0;
var colorBtn = document.getElementById("colorBtn");

function changeColor() {
  currentColor++;
  if (currentColor >= colors.length) {
    currentColor = 0;
  }
  colorBtn.style.backgroundColor = colors[currentColor];
}

上述代码定义了一个包含三种颜色的数组colors，以及一个变量currentColor来记录当前颜色的索引。在changeColor函数中，currentColor的值会递增，当递增到colors数组的长度时，会重置为0，实现颜色循环切换的效果。最后，通过修改按钮的背景色来显示当前的颜色。