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

Question

我这里有一个代码，我应该用来更改样式属性，设法让它工作，但必须查看放置 '、" 和+.

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

我对理解它的结构如何工作没有问题，我唯一的问题在于为什么你要求 element.src.

的额外 '、额外 " 和额外 +

最初我做了这样的事情，但显然没有用，为什么那些 ('" + 和 + "') 使代码工作...

感谢任何帮助

干杯

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

Answer 1

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

const element = "Hello!";

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

console.log({first,second});

Answer 2

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

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 是一个变量而不是字符串的一部分，因为您用双引号将它括起来，表明引号之间的所有内容都是字符串。

Answer 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/css/css_background_image.asp

但是为了完整地回答你的问题，里面的+用来表示你想在那里添加一些其他的东西，比如另一个字符串或一个变量。

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

JS Events help - when changing a style property