在javascript中的打开/关闭状态之间循环

Cycle between on/off states in javascript

本文关键字：状态 之间 循环 javascript      更新时间：2023-09-26

比方说，当我单击按钮时，我希望它的高度加倍，然后在下一次单击时恢复正常。所以基本上有一个状态和一个状态，点击这个按钮只是在它们之间切换。

var button = document.getElementById("box1");
button.onclick = function() {
  ON: document.getElementById("box1").style.height = "200px";
  OFF: document.getElementById("box1").style.height = "100px";
}

我该如何重写函数以便它跟踪状态？非常感谢您的帮助！

在CSS中：

#box1 {
  height: 100px;
}
#box1.on {
  height: 200px;
}

在您的JavaScript中：

var button = document.getElementById("box1");
button.addEventListener('click', function() {
  button.classList.toggle('on');
});


var button = document.getElementById("box1");
    
button.addEventListener('click', function() {
    button.classList.toggle('on');
});
#box1 {
  height: 100px;
}
    
#box1.on {
  height: 200px;
}
<button id="box1">Click me</button>

将您的新尺寸添加到.enlarge类：

button.addEventListener( "click", function () {
    button.classList.toggle( "enlarge" );
});

classList成员仅在IE 10及以上版本中受支持，但您可以轻松填充它。

var button = document.querySelector( "button" );
button.addEventListener( "click", function () {
   button.classList.toggle( "enlarge" );
});
.enlarge {
  font-size: 200%;
}
<button>Enlarge Me</button>

相关文章：