如何使用javascript和关键字改变背景图片，这

问题描述 投票：0回答：1

为什么评论的语句不能用

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 CODE:

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"')";
}
javascript html url background this
1个回答
0
投票

为什么你使用getElementbyId，而你的类没有图片的id（至少在你提供的示例中）。要么添加id，要么用类或标签名来选择。

0
投票

在您的代码中 "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>
0
投票

你的两个例子都不适用，正确的设置HTML标签的背景图片的方法是使用 

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

后面的 "+"号 预览图片.src.

解释：首先。"url(previewPic.src)"; 这将你的previewPic.src改变为一个字符串，因为它被封装在引号中.

第二：这将无法工作，因为你在引号后缺少 "+"号。x.style.background="url('"+previewPic.src"')"; 因为你的引号后面少了 "+"号，所以这就不能用了 预览图片.src

进一步阅读 MDN

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.