如何在javascript中使用图像的src更改标识符的url？答案

【问题标题】：How to change url of identifier with src of image in javascript?如何在javascript中使用图像的src更改标识符的url？
【发布时间】：2020-06-08 16:15:12
【问题描述】：

我想将光标悬停在图像上并将其作为另一个 div 的背景图像。我在 js 中执行以下操作：

function upDate(previewPic){
document.getElementById("image").style.backgroundImage="url(previewPic.src)";
}

src 包含一个在线链接，所以不用担心。我想通过 id "image" 访问 div 并将它的 bg image 的 url 替换为我悬停的图像的 src。我做了一个函数调用，将当前图像的对象发送给我。

这里是完整的代码：

function upDate(previewPic){
  document.getElementById("image").style.backgroundImage="url(previewPic.src)";
}

#image {
  line-height: 650px;
  width: 575px;
  height: 650px;
  border: 5px solid black;
  margin: 0 auto;
  background-color: #8e68ff;
  background-image: url('');
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-align: center;
  background-size: 100%;
  margin-bottom: 25px;
  font-size: 150%;
}

.preview {
  width: 10%;
  margin-left: 17%;
  border: 10px solid black;
}

<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()">

<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover="upDate(this)" onmouseout="unDo()">

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

【问题讨论】：

你已经接近了，你只需要使用插值：document.getElementById("image").style.backgroundImage=`url(${previewPic.src})`;，或者连接字符串document.getElementById("image").style.backgroundImage="url(" + previewPic.src + ")";
按照异端所说的，它解决了
@AksJacoves 下次只需点击评论旁边的向上箭头即可表示您的支持。
非常感谢！ @HereticMonkey 。我花了一整天的时间寻找这个。非常感谢。

标签： javascript html css mouseover getelementbyid

【解决方案1】：

您想要应用类似于以下 CSS 的内容：

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg");

但你实际上是这样做的：

background-image: url(previewPic.src);

这是您需要更新的 javascript 行，带有更正的字符串连接：

document.getElementById("image").style.backgroundImage= "url('" + previewPic.src + "')";

代码sn-p：

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

#image {
  line-height: 650px;
  width: 575px;
  height: 650px;
  border: 5px solid black;
  margin: 0 auto;
  background-color: #8e68ff;
  background-image: url('');
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-align: center;
  background-size: 100%;
  margin-bottom: 25px;
  font-size: 150%;
}

.preview {
  width: 10%;
  margin-left: 17%;
  border: 10px solid black;
}

<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('https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg')" onmouseout="unDo()">

<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover="upDate('https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG')" onmouseout="unDo()">

<img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" onmouseover="upDate('https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg')" onmouseout="unDo()">

【讨论】：

非常感谢@Run_Script 这真的很有帮助！