改变 JavaScript 中元素的不透明度

Question

所以基本上我想使用事件监听器来改变网格中元素的不透明度。在此事件侦听器中，我将获取元素的不透明度并将其增加 0.1。我曾经使用以下代码来做到这一点

square.addEventListener("mouseover", function (e) {
            let opacity = e.target.style.opacity;
            if (opacity + 0.1 < 1) {
                e.target.style.opacity = opacity + 0.1;
            } else if (opacity + 0.1 >= 1) {
                e.target.style.opacity = 1;
            }
        });

其中

square

代表以下内容

const cont = document.querySelector(".cont");
const square = document.createElement("div");

然后我附加

square

。

cont.appendChild(square);

嗯，我遇到的问题可以描述如下。不透明度仅增加到 0.1，如果您再次将鼠标悬停在方形元素上，则不透明度每次都是 0.1，它永远不会增加。我的理论是，div 元素的不透明度在每次迭代中都初始化为 0。当我想到这个问题时，我就产生了这种怀疑，但我在 Reddit 上遇到的一个非常好的解决方案似乎证实了这一点。

square.addEventListener("mouseover", function (e) {
            let opacity = e.target.style.opacity;
            if (opacity) { 
                e.target.style.opacity = Number(opacity) + 0.1 ;
            } else { 
                e.target.style.opacity = 0.1;
            }});

这似乎是在寻找不透明度内容的真实值。

预先感谢大家的关注。

Answer 1

当您检索样式时，它会以字符串形式返回（请参阅我的演示），因此当您将其与 0.1 进行比较时，它无法正常工作。你需要做的就是使用

parseFloat(e.target.style.opacity)

document.querySelector("P").addEventListener("mouseenter", (e) => {
  console.log("here: " + typeof e.target.style.opacity);
});

p {
  opacity: 0.5;
}

<p>Test</p>