Javascript document.getElementById.style.backgroundImage 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12320329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementById.style.backgroundImage not working
提问by Jane
I want to assign different background images to a div depending on the page's address, so for example, if my url is http://www.mywebsite.com/mysubdirectory/I use the following code:
我想根据页面地址为 div 分配不同的背景图像，例如，如果我的 url 是http://www.mywebsite.com/mysubdirectory/，我使用以下代码：
if(document.URL.indexOf("mysubdirectory") >= 0){
document.getElementById("wrapper").style.backgroundImage = "url('bg-wrapper.jpg')";
}
But it's not working. I even added a bogus document.write command just to make sure the rest of the code was ok and sure enough the bogus line showed up in my browser. Is there something I'm overlooking?
但它不起作用。我什至添加了一个伪造的 document.write 命令，只是为了确保其余的代码没有问题，并且确实在我的浏览器中显示了伪造的行。有什么我忽略的吗？
EDIT: Thank you all for your answers - when I use body instead of getElementById("wrapper") in my code, the image shows up, so I doubt it's a path-related issue. I trued adding an onload attribute to the body tag but it's still not working with getElementById. Any ideas?
编辑：谢谢大家的回答 - 当我在我的代码中使用 body 而不是 getElementById("wrapper") 时，图像会出现，所以我怀疑这是一个与路径相关的问题。我确实向 body 标记添加了一个 onload 属性，但它仍然无法与 getElementById 一起使用。有任何想法吗？
回答by Koen Peters
Your
您的
document.getElementById("wrapper").style.backgroundImage = "url('bg-wrapper.jpg')";
code is correct.
代码是正确的。
It works fine in this jsfiddle: http://jsfiddle.net/hUuN5/
它在这个 jsfiddle 中工作正常：http: //jsfiddle.net/hUuN5/
Are you sure the image is correct. Remember that the path to the file is relative to the location of the current page. NOT the css directory
你确定图片是正确的。请记住，文件的路径是相对于当前页面的位置。不是 css 目录
回答by CarinaPilar
I'm using Chrome 29.0.1547.66 and none of the anwers worked either.
我正在使用 Chrome 29.0.1547.66 并且没有一个答案有效。
So I tried:
所以我试过：
document.getElementById("wrapper").style.backgroundImage = "url(http://media.nu.nl/m/m1fz6dwa6h3w.jpg)";
It worked taking off the quotation marks from the image url.
它可以从图像网址中去除引号。
Here working as well: http://jsfiddle.net/xEujg/
这里也工作：http: //jsfiddle.net/xEujg/
回答by Lorenzo Gangi
Specifying a protocol worked for me in chrome. I couldn't get it to work using the catch all '//'. It had to be 'http://' I'm assuming it must match whatever protocol was used to load the page or iframe.
在 chrome 中指定一个对我有用的协议。我无法使用 catch all '//' 让它工作。它必须是 'http://' 我假设它必须匹配用于加载页面或 iframe 的任何协议。
for example element.style.backgroundImage="url(http://somedomain.com/images/myimage.jpg)" or element.style.backgroundImage="url('http://somedomain.com/images/myimage.jpg')" worked for me.
例如 element.style.backgroundImage="url( http://somedomain.com/images/myimage.jpg)" 或 element.style.backgroundImage="url(' http://somedomain.com/images/myimage.jpg )')”对我有用。
回答by majway27
This works for me:
这对我有用：
var pointer = "url(\'/" + imageArray[imageCounter].toString() + "\')";
document.body.style.backgroundImage = pointer
After spending a bit of time on this, it was the browser's engine parsing the CSS. No good errors in the console.
在花了一些时间之后，它是浏览器的引擎解析 CSS。控制台中没有好的错误。
回答by gregcomposition
If anyone is still interested in this. Here is a solution:
如果还有人对此感兴趣。这是一个解决方案：
document.getElementById("wrapper").style.background = "url(http://media.nu.nl/m/m1fz6dwa6h3w.jpg)";
回答by Gabe
Try this, I think the image url is wrong most likely. You probably need a relative path of sorts:
试试这个，我认为图片网址很可能是错误的。您可能需要某种相对路径：
document.getElementById("wrapper").style.backgroundImage = "url('/bg-wrapper.jpg')";
