如何使用纯JavaScript编写以下JQuery函数？

Question

我试图用透明图像构建一个配置器。 现在，图像配置器通过一个简单的JQuery函数工作：我给每个输入元素一个数据属性，我称之为data-Image。 该函数捕获选定选项的数据图像，并将其加载到元素的内联样式中。

<div id="configurator-image"></div>

<select id="configurator">
    <option data-image="url(http://test.com/img/option1.png)">option1</option>
    <option data-image="url(http://test.com/img/option2.png)">option2</option>
</select>

$("#configurator").change(function(){
    $("#configurator-image").css("background-image", ($('#configurator option:selected').data("image")));
}).change();

Codepen： http ：//codepen.io/anon/pen/jPaGVM

我正在尝试找出最佳做法。 等待使用的背景图像和其他元素可能不会。 为选定的选项简单地创建img会更聪明，这样的功能看起来如何？

我想减少网站负载，并且可能时不使用JQuery。

Answer 1

 function config() { document.querySelector("#configurator-image").style.backgroundImage = document.querySelector('#configurator option:checked').dataset.image; } config(); 

 #configurator-image { height: 100px; background-size: contain; } 

 <div id="configurator-image"></div> <select id="configurator" onchange="config()"> <option data-image="url(http://cardstock-test.de/products/feinleinen/agenda/chamois-inside.png)">option1</option> <option data-image="url(http://cardstock-test.de/products/feinleinen/agenda/schwarz-inside.png)">option2</option> </select> 

这对您有用吗？ 您可以使用addEventListener 。