Question

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

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

    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

你真的不需要var elem

中的dimmerSwitch变量

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

会做到这一点！

同样要切换，neater方法是定义css类并在dimmerSwitch函数之间切换，如

.dimmed{
  opacity: 0.55;
}

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

Javascript：动态更改网页不透明度

1 个答案: