javascript - 如何在单个元素上使用“onclick”执行两个相反的功能

Question

我有一个 html 文本框。我想要一个在第一次单击时扩展文本框并在第二次单击时将其恢复为原始大小的 JavaScript。ps：我是JS新手。

标签： javascripthtml

Answer 1

尝试使用以下toggle()功能HTMLElement.classList。

document.querySelector('div').addEventListener('click', ({ target }) => {
  target.classList.toggle('blue');
});

div {
  color: red;
}

.blue {
  color: blue;
}

<div>My Text</div>