Javascript:即时更改网页不透明度

Question

我希望能够使用 JavaScript 在单击特定图像时使网页变暗。我环顾四周并设法做到了这一点:

我必须即时创建图像 div，如下所示。为了更改屏幕不透明度，我在 html 文档中创建了一个“屏幕”div，并将其不透明度设置为 0。它起作用了。目的是能够向图像 div 添加属性，以便在单击它时，屏幕 div 的不透明度更改为 0.5。下面的解决方案有效，但从某种意义上说，当我打开它时，屏幕 div 会立即改变不透明度，而不是在单击图像时。此外，我需要以某种方式弄清楚如何在第二次单击图像后取消设置不透明度更改。我想我需要一个 boolean + if-statement 为此，但无法弄清楚它在这种情况下如何工作。任何帮助将不胜感激。

    var img = document.createElement('img');
    img.src = “images/myImage.jpg”;
    img.onclick = dimmerSwitch();   
    document.body.appendChild(img);

function dimmerSwitch (){   
    var elem = document.getElementById("dimmer").style["opacity"] = "0.55";
}

Answer 1

在 dimmerSwitch 中你真的不需要 var elem 变量

function dimmerSwitch (){   
    document.getElementById("dimmer").style.opacity = "0.55";
}

会成功的!

同样为了切换，更简洁的方法是定义 css 类并在您的 dimmerSwitch 函数中在它们之间切换，例如

.dimmed{
  opacity: 0.55;
}

这里有一个简洁的教程，解释了如何做到这一点:http://toddmotto.com/stop-toggling-classes-with-js-use-behaviour-driven-dom-manipulation-with-data-states/