更改 HTML 元素的不透明度

Question

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

为此，我使用下面的两个 CSS class：

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

并使用 javascript 更改 class：

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 秒后改变。

Change Opacity of an HTML Element