document.getElementById.style.backgroundImage 不工作

Question

我想根據頁面的地址為 div 分配不同的背景圖像，例如，如果我的 url 是http://www.mywebsite.com/mysubdirectory/我使用以下代碼：

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

但它不起作用。 我什至添加了一個偽造的 document.write 命令，只是為了確保代碼的 rest 沒有問題，並且確實在我的瀏覽器中顯示了偽造的行。 有什么我忽略的嗎？

編輯：謝謝大家的回答 - 當我在我的代碼中使用 body 而不是 getElementById("wrapper") 時，圖像會顯示出來，所以我懷疑這是一個與路徑相關的問題。 我確實向 body 標記添加了 onload 屬性，但它仍然無法與 getElementById 一起使用。 有任何想法嗎？

Answer 1

您的

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

代碼是正確的。

它在這個 jsfiddle 中工作正常： http : //jsfiddle.net/hUuN5/

你確定圖片是正確的。 請記住，文件的路徑是相對於當前頁面的位置。 不是 css 目錄

Answer 2

我正在使用 Chrome 29.0.1547.66 並且沒有一個答案有效。

所以我試過：

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

它可以從圖像網址中去除引號。

這里也工作： http : //jsfiddle.net/xEujg/

html css backgroundimage javascript

Answer 3

試試這個，我認為圖片網址很可能是錯誤的。 您可能需要某種相對路徑：

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

Answer 4

在 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 ) ')”對我有用。

Answer 5

這對我有用：

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

在花了一些時間之后，它是瀏覽器的引擎解析 CSS。 控制台中沒有好的錯誤。

Answer 6

如果還有人對此感興趣。 這是一個解決方案：

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

Answer 7

解決方案是不要在同一條線上做所有事情。

您必須創建一個變量，為其分配 url 然后傳遞它。

let bg = "url('" + imgUrl + "')";
document.getElementById("wrapper").style.backgroundImage = bg;