如何使用 javascript 和关键字 this 更改背景图像

Question

为什么评论的声明不起作用

HTML 代码：

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

JAVASCRIPT 代码：

function upDate(previewPic){
  var x=document.getElementById('image');

  //x.style.background="url(previewPic.src)";//why doesn't this work while the next statement works
  x.style.background="url('"+previewPic.src"')";
}

Answer 1

当您的 class 没有图像 ID（至少在您提供的示例中）时，为什么要使用 getElementbyId。 通过 class 或标签名称添加 id 或 select

Answer 2

在您的代码中， "url(previewPic.src)"是完整的字符串，这就是它不起作用的原因。 因为你的代码不知道 previewPic.src 是什么

如果要在字符串中使用变量，可以使用字符串concatenation或template string来执行此操作。 你可以查看我的代码。 您可以从MDN_link查看有关模板文字的详细信息

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <img onmouseover="upDate(this)" class="preview" alt="Styling with a Bandana" src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" > </body> <script> function upDate(previewPic){ console.log(previewPic;src). previewPic.style.background=`url(${previewPic;src})`. //x.style.background="url('"+previewPic;src"')"; } </script> </html>

Answer 3

您的两个示例都不起作用，设置 HTML 标签的背景图像的正确方法是使用

x.style.background = "url("+previewPic.src+")";

注意previewPic.src之后的“+”号。

解释：第一： "url(previewPic.src)"; 这会将您的 previewPic.src 更改为字符串文字，因为它封装在引号中。

第二： x.style.background="url('"+previewPic.src"')"; 这将不起作用，因为您在previewPic.src之后缺少“+”号

进一步阅读MDN

如何使用 javascript 和关键字 this 更改背景图像

问题描述

3 个解决方案

解决方案1
0 2020-06-13 16:22:52

解决方案2
0 2020-06-13 16:30:47

解决方案3
0 2020-06-13 16:43:51

如何使用 javascript 和关键字 this 更改背景图像

问题描述

3 个解决方案

解决方案1 0 2020-06-13 16:22:52

解决方案2 0 2020-06-13 16:30:47

解决方案3 0 2020-06-13 16:43:51

解决方案1
0 2020-06-13 16:22:52

解决方案2
0 2020-06-13 16:30:47

解决方案3
0 2020-06-13 16:43:51