javascript - 一种使用 Javascript 取消单击已单击按钮的方法

Question

有没有办法取消选择或取消单击已使用 JavaScript 单击的按钮？

所以基本上我有一个按钮:

if (i === 10) {
        var clicked = document.getElementById('i10');
        clickedButton.push(click.textContent);
        clicked.style.color = "pink";
}

因此，当我单击该按钮时，它会将文本变为粉红色。有没有办法再次单击按钮并让它删除推送并将文本变回黑色？

抱歉，Javascript 不是我的强项。

Answer 1

Web 编程类(class)时间:如果要设置样式，请不要使用 JavaScript 来设置样式，而使用 CSS 进行样式定义，然后仅使用 JavaScript指向该 CSS。

在你的 CSS 中:

.highlight {
  color: pink;
  background: blue;
  font-style: fantasy;
  whatever-else: StuffGoesHere;
}

然后是你的按钮处理:

button.addEventListener("click", function(evt) {
  var e = find.your.element.however.you.need();
  e.classList.toggle("highlight");
});

神奇:只要以正确的方式做事，代码就非常简单，而且我们不会对样式进行硬编码，我们只是指应该定义样式。

“但是如果浏览器不支持.classList怎么办？”:这么说的唯一原因是因为您没有跟上浏览器的改进程度。 Every browser supports classList .

当然，如果您需要做的不仅仅是切换，请将函数编写为独立操作，并向其抛出元素:

var records = {};

function toggleHighlight(e) {
  e.classList.toggle("highlight");
  if (e.classList.contains("highlight")) {
    // element is now highlighted, do things accordingly:
    records[e.id] = e.textContent;
    // ...
  } else {
    records[e.id] = false;
    // ...
  }
}

button.addEventListener("click", function(evt) {
  var e = find.your.element.however.you.need();
  toggleHighlight(e);
});