javascript - 切换对象的不透明度

Question

我正在制作一个基本动画，通过将 style.opacity 设置为 0 来随机使对象消失。这很好用。但是，我希望能够切换形状，而不是仅仅让它们不可见。

仅使事物不可见的工作代码：

--buttons[obj].style.opacity;

不工作的代码应该切换可见性：

buttons[obj].style.opacity = 1 - buttons[obj].style.opacity;

有谁知道为什么这不起作用？

链接到代码（jsfiddle）

标签： javascript

Answer 1

那是因为您的按钮现在没有opacity样式，您可以通过以下方式检查：

console.log(buttons[obj].style.opacity === ''); // true x36

所以，当你尝试计算

buttons[obj].style.opacity = 1 - buttons[obj].style.opacity;

这意味着：你正在计算这个公式：

buttons[obj].style.opacity = 1 - '' = 1;

---

更新示例以获取有关如何在 javascript 中获取元素样式的更多说明：

btn1.addEventListener('click', function () {
  console.log(this.style.opacity); // ''
});

btn2.addEventListener('click', function () {
  console.log(this.style.opacity); // 0.5
});

#btn1 {
  opacity: 0.5;
}

<button type="button" id="btn1">btn1</button>
<button type="button" id="btn2" style="opacity: 0.5;">btn2</button>