Question

让我说当我点击它时我想要一个高度加倍的按钮，然后在下一次单击时恢复正常。所以基本上有一个onstate和一个offstate，点击这个按钮就可以在它们之间翻转。

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

我怎样才能重写函数以便跟踪状态？非常感谢任何帮助！

Answer 1

在你的CSS中：

#box1 {
  height: 100px;
}

#box1.on {
  height: 200px;
}

在您的JavaScript中：

var button = document.getElementById("box1");

button.addEventListener('click', function() {
  button.classList.toggle('on');
});

＆＃13;

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

＆＃13;

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

＆＃13;

<button id="box1">Click me</button>

＆＃13;

Answer 2

将新的尺寸添加到Items级别：

.enlarge

仅在IE 10及更高版本中支持button.addEventListener( "click", function () { button.classList.toggle( "enlarge" ); });成员，但you can shim it easily支持。{/ p>

classList

var button = document.querySelector( "button" );

button.addEventListener( "click", function () {
   button.classList.toggle( "enlarge" );
});

.enlarge {
  font-size: 200%;
}

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

2 个答案: