Question

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

为什么必须在previewPic.src之前添加＆＃34; 和 + ？ console.log(previewPic.src)会显示图片的网址，但我尝试使用"url('previewPic.src')"来访问网址，但它不起作用。是什么原因？

演示于：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; 
}

Answer 1

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

Answer 2

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

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

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

Answer 3

object.style.backgroundImage =＆＃34; url（＆＃39; URL＆＃39;）＆＃34;，＆＃34; url（＆＃39; URL＆＃39;）＆＃34;是一个字符串。 url（）是你想要绑定的字符串的一部分，所以使用+来连接

为什么要添加＆＃34; +＆＃34;和双引号来访问对象的src？

3 个答案: