从一个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>