從一個javascript變量添加CSS屬性的HTML元素的jQuery

Question

我存儲在URL中的JavaScript變量「bg_url」，我想這個網址爲background-image屬性附加到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>