使用 jQuery 更新背景图像

Question

In jQuery, I'm trying to change the background image of a div:

var USR_Settings_Color = $('.social-icons ul li a.active').css('background-image');
// Return : url("https://example.com/fir-DIY.jpg")

After I update the like this:

$('#preview').html('<div style="background-image: '+USR_Settings_Color+'"></div>');

But the result is like this:

<div style="background-image:url(" https:="" example.com="" fir-diy.jpg");="" background-clip:="" text;="" -webkit-background-clip:="" color:="" transparent;"=""></div>

I think it's a conflict with the ' and " .

How I can solve this please?

Thanks.

Answer 1

Why do you use Html attr instead of css? try do this instead:

$('#preview').css('background-image', USR_Settings_Color)

by the way I would take all the properties you added in the html attribute, and put them in class, by this you just adding the specific div the class to keep a cleaner code.

Answer 2

try use the backtag instead:

$('#preview').html(`<div style=background-image:${USR_Settings_Color}></div>`);