Question

我的身体元素为空。每次单击时，JS单击处理程序都会将图像附加到event.clientX和event.clientY。

这可以，但是现在我希望创建的图像很好地淡入。我不确定是否需要为此设置setTimeout。

所以我刚刚尝试添加一个带有过渡的类，JS函数如下所示：

document.addEventListener('click', function(event) {
var currentImg; // this is for later
var ix = event.clientX;     // Get the coordinates
var iy = event.clientY; 
var x = document.createElement("IMG");
x.setAttribute("src", images[0]);
x.setAttribute("width", "304");
x.setAttribute("height", "228");
x.style.position="absolute";
x.style.top= iy + 'px';
x.style.left= ix + 'px';   // display image where the click event happened
x.style.opacity = 0.1;      // set opacity to 0.1
document.body.appendChild(x);
x.classList.add("fadeIn");      // add the fadeIn CSS class
var ix = null;                  // reset the position variables
var iy = "";
console.log(ix);

});

CSS类如下所示，两者都不起作用

.fadeIn{
opacity:1;

 }

 .img{
transition: all 1s;
 }
img:hover{
opacity:1;
}

该类是根据开发工具通过JS添加的，但是不透明度更改不会发生。因此，我尝试添加悬停类，但这也不会更改不透明度。

为什么要添加类，但是不透明度不会改变，这是因为它是添加到DOM的新元素吗？以及如何在点击时淡化图像？请不要使用jQuery，我可以使用jQuery。

这是codepen

https://codepen.io/damPop/pen/RqMxex

Answer 1

确保使用img（元素）而不是.img（类）

也

x.style.transition = 'all 1s';

或

x.classList.add('img');

Answer 2

这是您的解决方案。 https://codepen.io/rikin/pen/mQGBgq

您的问题分为2部分：

.img // class

并使用内联样式特定性来覆盖您的类样式

理想的解决方案将使用Javascript将类名添加到添加的元素中。

如何更改动态创建的图像的类属性值？

2 个答案: