时间戳

首页 > 解决方案 > 如何更改动态创建的图像的类属性值？

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

问题描述

我有一个空的身体元素。每次单击时，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 做到这一点。

这是代码笔

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

标签： javascriptcss

解决方案

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

还

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

或者

x.classList.add('img');

推荐阅读