通过纯JS添加图像

Adding an image via pure JS

本文关键字：添加 图像 JS      更新时间：2023-09-26

我是JS的新手，请帮帮我。我有4个具有相同类名的图像和一个隐藏的div，当单击其中一个图像时会显示它。我如何将图像添加到我的div中？点击了哪个？我不想为每个图像编写函数。我的代码可能吗？

 <a href="#"><img onClick="show()"class="img" src="css/images1/img1.png"></a>
 <a href="#"><img onClick="show()"class="img" src="css/images1/img2.png"></a>
 <a href="#"><img onClick="show()"class="img" src="css/images1/img3.png"></a>
 <a href="#"><img onClick="show()"class="img" src="css/images1/img4.png"></a>
<div class="gallery"></div>
<script>
    function show(){
        var x=document.getElementsByClassName('gallery')[0];
        x.style.display="block";    
        x.innerHTML='<img src=css/images1/img1.jpg>';
    };
</script>

输入单击的元素的"src"：

function show(src){
    var x=document.getElementsByClassName('gallery')[0];
    x.style.display="block"; 
    x.innerHTML = '<img src="' + src + '">';
}

然后，对于您的html <img/>标签，将其src传递给show:

<a href="#"><img onClick="show(this.src)"class="img" src="css/images1/img1.png"></a>

编辑：如果必须按className选择"gallery"，请使用最初的getElementsByClassName。

相关文章：