如何使用 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