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

我要参加一个在线课程，今天的作业本应该花半个小时，但我花了五个小时。最终，我放弃了尝试，因为我不知道自己哪里出了问题。在进行同行评审时，我看到了一些正确代码的示例，现在我知道我在使用引号时出错了。但在我看来，工作代码完全是胡说八道。你能解释一下这有什么意义吗

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

---

我感到很沮丧，因为我花了一整天的时间在网上到处搜索如何使用javascript在CSS中更改背景图像。我很接近，但没有人向我展示任何类似这样的引用（我班上的老师也没有）。我不知道我是怎么想出来的，也不知道我的同学是怎么想出来的

如果您将函数分解为以下几部分会更好：

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

一旦您在编程方面有所进步，您就可以轻松地在一条语句中编写整个函数。但理想情况下，你应该把你的陈述分解，使其更具可读性

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

---

希望这能回答您的问题。

让我们对代码进行分解：

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

第一行显然是函数。第二行调用通过ID获取元素，在本例中，它只是定义为一个图像。下一部分说明这是为ID“image”的背景图像添加样式。从这里开始，它实际上是调用图像以附加到ID。它正在查找与您所在的本地文件夹具有相同url的图像，并且名称为“previewPic”。相当简单的代码行。希望这有帮助

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'）

），但我忘了这是我们制定的编码标准；我想你的问题是什么？我们不知道你在尝试什么，什么不起作用，这就是为什么很难理解你的沮丧。在JS中阅读此代码是使用CSS设置背景图像

previewPic.src

。在连接不同的str之后结合起来，第二部分的内容如下：

url(http://imagelocation/image.jpg)

。也看看他的帖子，它也在做类似的事情：我们同情你的挫折，我们大多数人都不得不爬上类似的学习曲线。但是，你的问题相当不清楚（或者太宽泛，如果你想知道你发布的代码片段的每一个细节）。试着缩小问题的范围，包括你做过的任何研究和你尝试过的其他代码。-或者，看看你的在线课程是否提供了与同龄人、导师或老师的某种互动，以获得对材料的更全面的解释。我想这是迄今为止我得到的最好答案。我真正困惑的是bout是为什么previewImage.src甚至需要用引号引起来或与其他任何东西连接起来，为什么url（）需要用引号引起来？为什么我要在括号内用单引号，然后用双引号，然后进行连接（连接的是什么？我以为连接是在引号之外发生的？）。对我来说，连接非常混乱，因为我不明白首先连接的是什么。这些引号中只有一个参数，所以为什么要连接任何东西？@ChrisKH它不需要位于引号

url（path/to/image.jpg）中

是可以接受的。这是我在底部的编辑中想说的。您要做的是将文字文本设置为DOM属性。您可以手动输入字符串形式的值

el.style.backgroundImage='url（path/to/image.jpg）；

，但是您的图像（和路径）在变量中保存为

previewImage.src

，因此您需要用字符串包装该变量的内容：

'url（）'

。为此，请使用

'url（'

并添加变量值

+previewImage.src

，然后添加右括号

+'）的第一部分“

最主要的是，

el.style.backgroundImage

期望值是字符串。字符串是某种类型的数据，但作为初学者，你可以将字符串想象为引号中的文本。

previewImage.src

不是字符串，而是变量，因此你需要找到它的字符串值。你最终得到的结果就是这样。”类似于

el.style.backgroundImage='url（yourImageName.jpg）；

在内部，浏览器会识别它是一个函数（

url（）

），并完全限定内容（

http://domainname/path/to/yourImageName.jpg

）.backgroundImage属性只接受4个可能的值作为字符串

'none'

，

'initial'

，

'inherit'

，或

'url（）