为什么要添加“+”和双引号来访问对象的 src

Why add "+" and double quotes to access the object's src?

本文关键字：访问 对象 src 添加 为什么      更新时间：2023-09-26

当鼠标悬停在预览类图像上时，#imagediv将显示图像而不是原始纯文本。JavaScript 函数运行良好。我有一个关于使用 document.getElementById('image').style.backgroundImage="url('"+previewPic.src+"')"; 获取参数 url 的问题。

为什么必须在previewPic.src之前添加"和+"？ console.log(previewPic.src)将显示图像的 URL，但我尝试使用 "url('previewPic.src')" 访问 URL，它不起作用。原因是什么？

演示位置：http://codepen.io/betty-Liu/pen/GoxLpb

<body>
    <div id = "image">
        Hover over an image below to display here.
    </div>
    <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)" >
</body>

JavaScript 函数：

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

这只是字符串连接，用于将字符串连接在一起，包括变量和属性。

访问 backgroundImage 属性以设置 CSS background-image需要使用url()表示法。您必须将URL放在括号之间。要组装它，您可以使用 + 运算符将其与保存 URL 的变量连接起来：

element.style.backgroundImage = "url(" + picture.src + ")";

您不需要在url()中使用引号，但是，您可以。在CSS和JavaScript中，它们是可互换的，这意味着"url('/img.jpg')"等同于'url("/img.jpg")'。

object.style.backgroundImage="url（'URL'）"

， "url（'URL'）"是一个字符串。url（） 是你想要 assgin 的字符串的一部分，所以使用 + 连接

相关文章：