JavaScript/jQueryインラインバックグラウンドURLから二重引用符を削除しますか？Firefox？

Question

Firefoxが背景URLに二重引用符を追加するのはなぜですか？

だから私はこのようなものがあります：

<div id="image" style="background-image:url(http://domain.com/images/img.jpg)"></div> 

今、私はクリックイベントではjQueryを使用して画像を置き換えたい：

$("#replace").on('click', function() { 
     $("#image").css({'background-image': 'url(http://domain.com/images/img2.jpg)'}); 
}); 

すべてが正常に動作しますが、Firebugの中で、私は二重引用符を見ることができますが：

これは、保存と再読み込みの際にHTMLを混乱させます。

私は

$("#image").css({'background-image': ('url(http://domain.com/images/img2.jpg)').replace(/\"/g, "")}); 

を使用して、引用符を削除しようとしたが、それは動作しません。

防止する方法はありますか？

Answer 1

あなたが見ているのは、計算された値です。スタイルプロパティを設定すると、値は解析され正規化されますが、ブラウザはそれを表示するのが好きです。

styleの属性には、開発ツール（Firebugまたは内蔵）を使用してurl("...")が表示されても、実際にはHTMLが破られていません。エンコードされていない属性を表示しているだけなので、基になるHTMLの内容である&のようなものを見る必要はありません。

ほとんどの場合、この小さな奇妙なものを無視することができます。ブラウザがこれらのプロパティを表示する方法を実際に変更することはできません。

Answer 2

あなたのHTMLにタイプミスがあります：

<div id="image style="background-image:url(http://domain.com/images/img.jpg)"></div> 

それは次のようにする必要があります：

<div id="image" <------- close this id attribute here 

$(function() { 
 

 
\t $("#btn").on('click', function(e) { 
 
    \t $("#img-block").css("background-image", "url('https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg')"); 
 
    }) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="img-block" style="background-image: url('http://wowslider.com/sliders/demo-23/data1/images/hohenschwangau532864.jpg');"> 
 
    Hello World! 
 
</div> 
 

 
<button id="btn"> 
 
    Replace 
 
</button>

・ホープ、このことができます！