javascript - 如何在单击时切换按钮颜色并在再次单击时将颜色更改回之前的颜色

Question

我必须制作一个用于给消息加星标的按钮。最初按钮的颜色是白色，当我点击按钮时，它应该将颜色更改为金色，当再次单击相同的按钮(取消星标消息)时，颜色应该再次将颜色更改为初始背景颜色，即白色.

HTML: <button class="btn-hold" data-text-swap=" Starred!">Star Message!</button>

JavaScript(用于切换按钮上的消息):

button.addEventListener('click', function() {
  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);

CSS:

.btn-hold{

    float: right;
    text-decoration-color: white;
    background-color: ; 
    font-family: Lato;
    font-size: 20px;
    cursor: pointer;    
}
button{
    float: right;
}
button:focus{
    background:#FFD700;
}

Answer 1

您可以使用 classList 的原生 toggle 方法属性(property)。 JavaScript 中还缺少对单击的按钮 的引用。

var button = document.querySelector('.btn-hold');

button.addEventListener('click', function() {
  this.classList.toggle('btn-alt-color');

  if (button.getAttribute("data-text-swap") == button.innerHTML) {
    button.innerHTML = button.getAttribute("data-text-original");
  } else {
    button.setAttribute("data-text-original", button.innerHTML);
    button.innerHTML = button.getAttribute("data-text-swap");
  }
}, false);

.btn-hold {
  float: right;
  text-decoration-color: white;
  background-color: ;
  font-family: Lato;
  font-size: 20px;
  cursor: pointer;
}

button {
  float: right;
}

button:focus {
  background: #FFD700;
}

.btn-hold.btn-alt-color {
  background-color: lightgreen;
}

<button class="btn-hold" data-text-swap=" Starred!">Star Message!</button>

jsFiddle