如何从javascript设置background-image属性？

Question

我想使用JavaScript设置background-image属性。

问题是，我有像这样的图像链接：

https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg

当我尝试将此链接设置为样式时，它无法处理我认为的某些字符。

<div style='background-image: url(urlString);'

有没有办法处理这些字符或我需要使用其他方式添加background-image？

Answer 1

在CSS strings中使用url(…)周围的引号：

<div style='background-image: url("https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg");'>

Answer 2

您可以这样设置：

var div = document.querySelector(...); // select the div
div.style.backgroundImage = "url('" + urlString + "')";

Answer 3

使用：

element.style.backgroundImage = "url('your cdn path')";

这是一个代码片段：https://jsfiddle.net/fnwjhgzw/

Answer 4

var imageURL = 'https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg';


var imageElement = document.getElementById('image');
imageElement.style.backgroundImage = "url('"+imageURL+"')";

#image {
  height: 300px;
  background-position: center;
}

<div id="image">
</div>

Answer 5

应该使用element.style.backgroundImage="url('image name')";。这里元素是一个变量。如果要设置网页的背景图像，请在代码中使用document.body而不是element。