javascript - 更改元素的背景图像

Question

因此，我在创建一个非常简单的函数时遇到了一些问题，该函数应该更改 div 元素的背景图像以匹配鼠标悬停在其上的任何图像。

HTML 看起来像

<div id = "image">
    Hover over an image below to display here.
</div>

<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">

这只是我想要更改的 div 元素以及其中一张图像。 所以我们的函数应该接受一个图像元素作为参数。但我在访问此图像参数的 src 属性并在 .style.backgroundImage 属性中使用该属性时遇到了很多麻烦。

我当前的代码是:

function upDate(previewPic){
    var div_element = document.getElementById('image').innerHTML;
    var picurl = "url(previewPic.getAttribute('src'))"
    div_element.style.backgroundImage = "url(picurl)";
 }

这让我在浏览器控制台上出现 Uncaught TypeError: Cannot set property 'backgroundImage' of undefined 错误。 如果你能看出来，我正在尝试将实际的 div 对象放入变量中，然后将图片 url 放入变量中。然后我想使用 .style.backgroundImage 属性。这不起作用。但解决方案可能非常简单。我可以做什么来修复它？

Answer 1

您的代码存在多个问题。

1. 获取内部 html 只是将变量设置为元素内部内容的字符串表示形式，这没什么，因为它是 <img>标签。
2. 本质上，您将所有内容都放在引号中，因此 javascript 不会对其执行任何操作。

删除.innerHTML从函数的第一行开始，然后将 javascript 需要评估的部分作为代码从引号中取出。

将代码更改为:

function upDate(previewPic){
    var div_element = document.getElementById('image');
    var picurl = "url(" + previewPic.getAttribute('src') +")"
    div_element.style.backgroundImage = picurl;
}

这应该有效。