javascript変数のCSS属性をjqueryのhtml要素に追加

Question

javascript変数 "bg_url"にurlを保存しました。このurlをhtml要素の背景画像プロパティに付加します。

私のhtml

<div id=#wrapper> 
<p>test</p> 
</div> 

と私のjQueryのは

$("#wrapper").css({ background-image: "'print(bg_url)'" }); 

のようですが、私は、CSSのプロパティに添付変数を得ることはありません。 誰かがアイデアを持っていますか？

Answer 1

キャメルケースのプロパティを使用するか、プロパティ名に-が含まれているため引用符を使用してください。

$("#wrapper").css({ backgroundImage: 'url('+ bg_url+ ')' }); 
// or 
$("#wrapper").css({ 'background-image': 'url('+ bg_url+ ')' }); 

そこ要素のあなたのid属性で#の必要はないと、それは属性値をラップするために引用符を使用するのが無難ですが。

<div id="wrapper"> 

参照してください：HTML attribute with/without quotes

Answer 2

を私はあなたがどのようにCSSとJavaScriptの作業を学ぶべきであると考えています。

1. あなたは"を持っていません。 <div id="wrapper">である必要があります。 #を削除します。
2. +演算子を使用して連結する必要があります。
3. 必ず$(function() {})の中に入れてください。

あなたのコードは次のようになります。

var bg_url = "http://placehold.it/100?text=Background"; 
 
$(function() { 
 
    $("#wrapper").css({ 
 
    backgroundImage: "url('" + bg_url + "')" // And don't forget the quotes here. 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p>test</p> 
 
</div>