使用jQuery將css屬性從javascript變量添加到html元素

Question

我在javascript變量“ bg_url”中存儲了一個網址，並且希望將此網址附加到html元素的background-image屬性。

我的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屬性

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>