如何在单击按钮时切换属性的ID

Question

我目前正在编写chrome应用程序（不要与扩展名混淆。是的，chrome应用程序仍然存在[仅在Chromebook上]）。无论如何，我需要更改一个圆圈ID，这会将CSS动画更改为绿点而不是红点。这是我的代码：

HTML（之前）：

<div class="circle" id="redcircle"></div></td>
<button type="button" id="clickme">Unlock</button></td>

HTML（单击按钮时，它需要看起来像这样）：

 <div class="circle" id="greencircle"></div></td>
    <button type="button" id="clickme">Unlock</button></td>

CSS：

#redcircle {
  height: 15px;
  width: 15px;
  background-color: #00FF00;
  border-radius: 50%;
  animation-name: Fade01;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  margin-left: 10px;
}
#greencircle {
  height: 15px;
  width: 15px;
  background-color: #00FF00;
  border-radius: 50%;
  animation-name: Fade02;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  margin-left: 10px;
}
@keyframes Fade01 {
    0% {background-color: #FFFFFF;}
    50% {background-color: #FF0000;}
    100% {background-color: #FFFFFF;}
}
@keyframes Fade02 {
    0% {background-color: #FFFFFF;}
    50% {background-color: #00FF00;}
    100% {background-color: #FFFFFF;}
}

谢谢！