3

我想根据页面的地址为 div 分配不同的背景图像，例如，如果我的 url 是http://www.mywebsite.com/mysubdirectory/我使用以下代码：

if(document.URL.indexOf("mysubdirectory") >= 0){ 
   document.getElementById("wrapper").style.backgroundImage = "url('bg-wrapper.jpg')";
}

但它不起作用。我什至添加了一个伪造的 document.write 命令，只是为了确保其余代码正常，并且确实在我的浏览器中显示了伪造的行。有什么我忽略的吗？

编辑：谢谢大家的回答 - 当我在我的代码中使用 body 而不是 getElementById("wrapper") 时，图像会显示出来，所以我怀疑这是一个与路径相关的问题。我确实向 body 标记添加了 onload 属性，但它仍然无法与 getElementById 一起使用。有任何想法吗？

4

6 回答 6

8

您的

document.getElementById("wrapper").style.backgroundImage = "url('bg-wrapper.jpg')";

代码是正确的。

它在这个 jsfiddle 中运行良好：http: //jsfiddle.net/hUuN5/

你确定图像是正确的。请记住，文件的路径是相对于当前页面的位置的。不是 css 目录

于 2012-09-07T14:47:54.877 回答
2

我正在使用 Chrome 29.0.1547.66，但也没有任何答案有效。

所以我尝试了：

document.getElementById("wrapper").style.backgroundImage = "url(http://media.nu.nl/m/m1fz6dwa6h3w.jpg)";

它可以从图像网址中删除引号。

这里也可以工作：http: //jsfiddle.net/xEujg/

于 2013-09-13T23:44:40.967 回答
1

试试这个，我认为图片网址很可能是错误的。您可能需要某种相对路径：

document.getElementById("wrapper").style.backgroundImage = "url('/bg-wrapper.jpg')";
于 2012-09-07T14:44:19.943 回答
1

在 chrome 中指定协议对我有用。我无法使用 catch all '//' 让它工作。它必须是 'http://' 我假设它必须匹配用于加载页面或 iframe 的任何协议。

例如 element.style.backgroundImage="url( http://somedomain.com/images/myimage.jpg )" 或 element.style.backgroundImage="url(' http://somedomain.com/images/myimage.jpg ')" 为我工作。

于 2015-07-06T22:28:02.153 回答
1

如果还有人对此感兴趣。这是一个解决方案：

document.getElementById("wrapper").style.background = "url(http://media.nu.nl/m/m1fz6dwa6h3w.jpg)";
于 2017-09-30T00:40:56.100 回答
1

这对我有用： 

var pointer =  "url(\'/" + imageArray[imageCounter].toString() + "\')";
document.body.style.backgroundImage = pointer

在花了一点时间之后，它是浏览器的引擎解析CSS。控制台中没有好的错误。

于 2016-07-21T12:23:06.307 回答