Add css attribute from a javascript variable to a html element with jquery

Question

I stored a url in a javascript variable "bg_url" and I want to attach this url to a background-image property to a html element.

my html

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

and my jQuery is like

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

but I do not get the variable attached to the css property. Does someone have an idea?

Community · Accepted Answer · 2017-05-23 11:45:24Z

4

Use camel cased property or use quotes since it contains - in the property name.

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

Although there is no need for # in your id attribute of the element and it's always better to use quotes to wrap the attribute value.

<div id="wrapper">

Refer : HTML attribute with/without quotes

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Dec 28, 2016 at 20:21

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2016-12-28 20:33:13Z

0

I believe you should learn how CSS and JavaScript work. There are loads of mistakes:

You don't have ". It should be <div id="wrapper">. And remove the #.
You should concatenate using + operator.
Always make sure you put it inside $(function () {}).

Your code should be:

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>

edited Dec 28, 2016 at 20:33

answered Dec 28, 2016 at 20:23

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Collectives™ on Stack Overflow

Add css attribute from a javascript variable to a html element with jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related