使用 javascript 设置背景图像，无需硬编码

Question

在这里，我试图通过使用 javascript 函数对每个图像进行硬编码，将这些图像显示为 id 为“消息”的 div 部分的鼠标悬停事件的背景图像，如下所示。

正文部分的 HTML 代码

<div id = "message">
    Hover over an image to display the
         alt text.
</div>

<img class = "preview"
     alt = "Styling with a Bandana"
     src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg"
     onmouseover = "showProperties(this);show1()"
     onmouseleave = "document.getElementById('message').innerHTML='Hover over an image'; show()">

<img class = "preview"
     alt = "With My Boy"
     src = "https://s3-us-west 2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG"
     onmouseover = "showProperties(this);show2()"
     onmouseleave =  "document.getElementById('message').innerHTML='Hover over an image';show()">

<img class = "preview"
      src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg”
      alt = "Young Puppy"
      onmouseover = "showProperties(this);show3()"
      onmouseleave = "document.getElementById('message').innerHTML='Hover over an image';show()">

设置背景图片的Javascript函数：

function show1()
{ 
  document.getElementById('message').style.backgroundImage = "url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg')"
}

有什么方法可以使用 src 属性使用 javascript 更改它，而无需对 url 进行硬编码并动态更改它？

Answer 1

看看这是不是你想要的：

let previews = document.querySelectorAll('.preview') // get all div.preview


for(let preview of previews) { // Creates the mouseover event for all div.preview
  preview.addEventListener('mouseover', function(e) { 
    let message = document.querySelector('#message')
    message.style.background = `url(${this.src})`
    message.style.width = this.width + 'px'
    message.style.height = this.height + 'px'
    message.style.backgroundSize = 'contain'
    message.style.backgroundRepeat = 'no-repeat'
    
  })
}

<div id="message">
   Image here
</div>

<img class="preview" width="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg">

<img class="preview" width="200" src="https://s3-us-west 2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG">

<img class="preview" width="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg">

已编辑