更改與jQuery不工作div背景

-1

我有一個div，我想改變背景圖像。在我的代碼中，如果參數改變，頁面加載時它會改變。我寫了一個示例代碼在此的jsfiddle：更改與jQuery不工作div背景

正如你可以看到，當我按下按鈕時，DIV背景發生變化，但在我的代碼背景圖像只是不加載，只是改變白色背景。在我的代碼 CSS的div：

div[data-role="page"]{ 
min-height: 100%; 
width: 100%; 
padding: 0px; 
margin: 0px; 
border: 0px; 
background-image:url('../img/blue_background.jpg'); 
}

的代碼，我改變背景行：

$('div[data-role="page"]').css('background-image','url("../img/green.jpg")');

的新形象是我的WWW文件中IMG文件。代碼加載在CSS上的初始圖像沒有問題，但是當我改變它，不加載。已經嘗試了很多關於stackoverflow的問題的答案，但沒有一個解決。有什麼幫助嗎？

來源

2016-07-01 Tiago Pina

您的代碼似乎適用於我。背景圖像變爲帶有黑色/綠色漸變的圖像。 –

代碼正在爲我工作..任何特定的瀏覽器或實例？ –

是的，我知道jsfiddle文件上的示例正在工作，但在我的代碼上它不是，無論我做什麼，只要更改爲白色背景 –

代碼完全沒問題。 請注意， 每當您嘗試使用jQuery添加CSS時，CSS代碼直接添加到頁面上的元素。因此，在這種情況下，只要您嘗試使用jQuery在HTML中添加任何基於CSS的URL，就應該考慮使用HTML（或View）文件的路徑。上面的例子顯示在你的CSS文件中的圖片路徑是

background-image:url('../img/<AN IMAGE FILE>');

是相同的jQuery

$('div[data-role="page"]').css('background-image','url("../img/<AN IMAGE FILE>")');

道路，這就是你錯了洞。請考慮HTML文件，在您的jQuery代碼中更正您的圖像路徑。

來源

2016-07-01 11:27:37 WebDevRon

thx mate，將路徑更改爲「img/green.jpg」並且它工作;） –

可能是文件層次結構問題。

您會發現，通過鏈接標記加載樣式文件時，相關URL將使用樣式文件的目錄進行解析。

html/script標籤也是一樣。

. 
| index.html 
+---css 
|  style.css // Just the css, you already presented above. 
\---img 
    blue_background.jpg 
    green_background.jpg 

// index.html 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
    <div data-role="page">Test</div> 
    <script> 
     function fWrong() { 
      var div = document.querySelector('div[data-role="page"]'); 
      // "../img" does not point to the intended img directory. 
      // Because index.html and img direcotry at the same level. 
      div.style.backgroundImage = "url('../img/green_background.jpg')"; 
      setTimeout(fRight, 2000); 
     } 
     function fRight() { 
      var div = document.querySelector('div[data-role="page"]'); 
      // Just one dot less. "./img" does point to the intended img directory. 
      div.style.backgroundImage = "url('./img/green_background.jpg')"; 
     } 
     setTimeout(fWrong, 2000); 
    </script> 
</body> 
</html>

來源

2016-07-01 11:36:36

通過將路徑更改爲「img/green_background.jpg」來解決它。 thx反正交配;） –

更改與jQuery不工作div背景

回答

相關問題