jqueryが動作していないdivの背景を変更する

-1

私は背景画像を変更したいdivがあります。私のコードでは、パラメータが変更された場合にページがロードされたときに変更されます。あなたが見ることができるようにjqueryが動作していないdivの背景を変更する

、私はボタンを押したときに、divの背景が変更されますが、私のコードの上に背景画像だけでロードされない、ちょうどに変更します。私はこのjsfiddle上のサンプルコードを書きました白い背景。私のコード上のdivの CSS：

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ファイル内の画像パスを示す上記の例は

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

jQueryの

におけるパスと同じである

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"に変更して解決しました。とにかく仲間;） –

jqueryが動作していないdivの背景を変更する

答えて

関連する問題