更改 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 秒后发生变化。