解释在Javascript中使用引号来更改CSS中的背景图片

Question

我正在上在线课程，今天的作业本应该花1/2小时，但花了我5个时间。最终我放弃尝试，因为我不知道自己要去哪里。 在进行同行评审后，我看到了一些正确代码的示例，现在我知道我在使用引号时出错了。 但是对我来说，工作代码看起来简直是胡言乱语。 你能告诉我这有什么道理吗？

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

我感到沮丧是因为我整天都在网上到处搜索如何使用JavaScript更改CSS中的背景图片。 我离得很近，但是没人给我看过这样的引号（班上的老师也没有）。 我不知道该如何解决这个问题，也不知道我的任何同学如何解决这个问题。

Answer 1

如果将功能分解为以下部分会更好：

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

一旦您在编程上变得更好，就可以轻松地用一条语句编写整个函数。 但理想情况下，您应该分解语句以使其更具可读性。

另外，在javascript字符串中，单引号和双引号之间没有区别。

希望这能回答你的问题。

Answer 2

让我们分解一下代码：

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

第一行显然是功能。 第二行调用以按ID获取元素，在这种情况下，它仅定义为图像。 下一部分说明，这是为ID“图像”的背景图像添加样式。 从那里开始，它实际上是在调用要附加到id的图像。 它正在寻找一个与您所在的本地文件夹具有相同url的图像，并且名称为“ previewPic。代码行相当简单。希望对您有所帮助！

Answer 3

function setBackground( elemId, previewImage ){
  var el = document.getElementById(elemId),
      bg = "url('" + previewImage.src + "')";

  el.style.backgroundImage = bg;
}

setBackground( 'image', /* previewPic here*/ );

• +用作字符串连接器，它将多个字符串组合为一个
• 单引号或双引号内的文本被视为字符串或文本值（例如，“这是某些文本”）
• 为了在字符串中使用引号，您可以使用反斜杠对它们进行转义（例如， '\\''产生一个字符串： ' ），或者可以互换双引号或单引号（例如， "'"也产生一个字符串） ： ' ;或'"'产生" ）

---

编辑：
我本来以为url（）必须带引号的字符串参数（例如url('path/to/image.jpg') ），但是我忘了这是我们制定的编码标准。 我认为W3C标准说这是可选的