Javascript 选择要在div中显示为bg img的图像

我正在建立一个数字海报编辑器，所以我需要帮助设置一个图像作为一个div的背景外观。我不知道从哪里开始

我创建了一个div，其中有几个图像可供选择，还有一个空div，只有一个div id

这是我的图像部门：

<div id="imgopt">
    <ol>
        <li>
            <img src="asset/img/template1.jpg">
        </li>
        <li>
            <img src="asset/img/template2.jpg">
        </li>
        <li>
            <img src="asset/img/template3.jpg">
        </li>
        <li>
            <img src="asset/img/template4.jpg">
        </li>
    </ol>
</div>

这是我的空Div：

<div id="designPoster">

</div>

Basic我需要写js代码的帮助，或者一些关于如何通过从div[id=imgopt]中选择一个图像来实现设置空div[id=designPoster]背景图像的功能的指导。

假设img src是您想要设置的背景：

$('#imgpot img').onClick(function(){
    $('#designPoster').css('background-image', `url(${this.attr('src')})`);
});

---

这将为imgpot中的每个图像标记添加一个事件处理程序，单击时，它将把designPoster的背景图像属性分配给单击的图像src属性。

这将满足您的要求

$function{ $'imgopt img'。单击，函数{ var imageSource=$this.prop'src'； $'designPoster'.css'background-image'，'url'+imageSource+； }; };

---

如果您想在不使用jQuery的情况下使用Javascript实现这一点，下面是如何实现的。 请注意，我更改了图像以获得一个工作示例

var imageElts=document.querySelectorAllimgopt img； var posterlet=document.querySelectordesignPoster； 对于var i=0；i<图像长度；i++{ ImageLts[i]。添加EventListenerClick，changeBgImage； } 函数更改图像{ posterlet.style.backgroundImage=url+e.target.src+； posterret.style.backgroundSize=包含； posterrelt.style.backgroundRepeat=无重复； } imgopt img{ 光标：指针； 宽度：100px； 高度：自动； } 设计海报{ 宽度：400px； 高度：157px； 背景：ccc； } 纯Javascript：