更改HTML元素的不透明度

Question

我正在尝试创建一个叠加层，当单击HTML画布元素上的图形时显示该叠加层。我目前的问题是改变覆盖元素的CSS不透明度。

要做到这一点，我使用下面的两个CSS类：

.Overlay {
  opacity: 0.5;
  background: BLUE;
}
.Overlay-Open {
  opacity: 1;
  background: RED;
}

并使用javascript更改课程：

document.getElementById("Node-Data").setAttribute("class","Overlay-Open");

我慢慢疯了，因为我无法理解为什么背景颜色会改变，而不是不透明度。有人能借给我一些他们的巫术知识来调试这个问题吗？如果需要，我会提供更多代码。

更新

Sample Code *点击一个节点

代替

document.getElementById("Node-Data").setAttribute("class","Overlay-Open");

与

document.getElementById("Node-Data").classList.add('Overlay-Open');
document.getElementById("Node-Data").classList.remove('Overlay');

Answer 1

这是在JavaScript中操纵class元素的合适方法：

var el = document.getElementById('Node-Data');
el.classList.add('Overlay-Open');
el.classList.remove('Overlay');  

对我来说工作正常，看看这个codepen，2秒后不透明度和背景颜色变化。