使用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>