JS 事件帮助 - 更改样式属性时答案

【问题标题】：JS Events help - when changing a style propertyJS 事件帮助 - 更改样式属性时
【发布时间】：2020-11-05 17:14:33
【问题描述】：

我在这里有一个代码，我应该用来更改样式属性，设法使它工作，但必须查找放置 '、" 和 + 的正确方法。

    document.getElementById('image').style.backgroundImage="url('" + element.src + "')";

我没有问题理解它的结构是如何工作的，我唯一的问题在于为什么在你调用 element.src 的地方有额外的 '、extra " 和额外的 +。

原来我做了这样的事情，它显然没有工作，为什么那些（'“+和+”'）让代码工作......

感谢任何帮助

干杯

document.getElementById('image').style.backgroundImage="url(' element.src ')";

【问题讨论】：

【解决方案1】：

让我们从您的第一个代码段开始分析所有内容，这应该可以让您更好地理解：

document.getElementById('image').style.backgroundImage="url('" + element.src + "')";

document 是一个变量

getElementById 是一个函数，字符串'image' 是该函数的参数。

style 是一个属性

backgroundImage 是一个属性，必须是并且必须采用字符串

"url('" 是一个字符串

element 是一个变量，在这种情况下是一个对象，src 是它的属性之一。

"')" 是一个字符串

+ 符号用于连接由"url('"、element.src 和“')”组成的字符串。简而言之，您是说“从"url('"、element.src 和"')" 中创建一个字符串，并将该字符串分配给属性backgroundImage。

而在此：

document.getElementById('image').style.backgroundImage="url(' element.src ')";

浏览器不知道element.src 是一个变量而不是字符串的一部分，因为你用双引号将它括起来，表示引号之间的所有内容都是一个字符串。

【讨论】：

【解决方案2】：

element 是字符串文字之外的变量，但在字符串文字内部它只是单词元素。

const element = "Hello!";

const first = "start element end";
const second = "start " + element + " end";

console.log({first,second});

【讨论】：

【解决方案3】：

在 CSS 内部，您必须将您的 URL 放在引号或撇号内，这样它也必须转换为 javascript。

当你调用 DOM 事件时，它会这样做：

原始标签：

<div src="http://example.com/image.png"></div>

调用javascript函数后：

<div style="background-image: url('http://example.com/image.png');" src="http://example.com/image.png"></div>

并且由于您需要在 URL 语法中使用某种引号，因此您必须使用不同类型的引号，例如在本例中为 ''。

但要完全回答您的问题，其中的+ 用于表示您想在此处添加其他内容，例如另一个字符串或变量。

更多信息请点击此处：https://www.w3schools.com/jsref/jsref_operators.asp（您必须向下滚动到字符串运算符部分）。

【讨论】：