使用jQuery CSS属性设置background-image出错

我在 imageUrl </ code>变量中有一个图片网址,我试图将其设置为 CSS样式,使用jQuery:</ p>

  $('myObject')。css('background-image',imageUrl); 
</ code> </ pre>

这似乎不起作用,如:</ p>

  console.log($('myObject')。css('background-image')); \  n </ code> </ pre> 

返回 none </ code>。</ p>

任何想法,我做错了什么?</ p>

</ div>

展开原文

原文

在ImageUrl变量中有一个图像URL,我试图使用jQuery将其设置为CSS样式:

$('myObject').css('background-image', imageUrl);

这似乎不起作用,因为:

console.log($('myObject').css('background-image'));

返回了这个结果: none

我哪里做错了吗?

douxun4924
douxun4924 jQuery第一次没有尝试猜测用户的意思。
接近 10 年之前 回复
dongshen6060
dongshen6060 不,它没有正确设置。我正在记录它,它只是没有改变。
11 年多之前 回复
dongzhuo6137
dongzhuo6137 究竟是什么问题?Jquery是否会抛出错误?
11 年多之前 回复

10个回答



你可能想要这个(使它像普通的CSS背景图像声明一样):</ p>

  $('myObject')。css('background-image','url('+ imageUrl +')'); 
</ code> </ pre>

</ div >

展开原文

原文

You probably want this (to make it like a normal CSS background-image declaration):

$('myObject').css('background-image', 'url(' + imageUrl + ')');

dongwo7858
dongwo7858 我在这个脚本中使用你的代码,但是给我一个background-image:url((unknown)); 这是我的脚本:var bg_img = jQuery('。wp-show-posts-inner')。attr('data-src'); jQuery('。wp-show-posts-inner')。on('mouseover',function(){jQuery('。home-banner .bg')。css('background-image','url('+ bg_img) +')');}); 知道为什么吗?
大约 2 年之前 回复
dongshan1959
dongshan1959 我是这样做的 - 但是'url'和左括号之间的空格导致我的代码失败。 复制/粘贴你的并实现了这个问题。 谢谢!
5 年多之前 回复



除了其他人正确建议的内容之外,我发现通常更容易切换CSS类,而不是单独的CSS设置(尤其是背景图像) 网址)。 例如:</ p>

  //在CSS 
.bg1
{
background-image:url(/some/image/url/here.jpg);
}

.bg2
{
<background-image:url(/another/image/url/there.jpg);
}

//在JS
中//基于imageUrl的值 ,确定要删除的类和要添加的类。
$('myOjbect')。removeClass('bg1')。addClass('bg2');
</ code> </ pre>
</ div >

展开原文

原文

Alternatively to what the others are correctly suggesting, I find it easier usually to toggle CSS classes, instead of individual CSS settings (especially background image URLs). For example:

// in CSS 
.bg1 
{
  background-image: url(/some/image/url/here.jpg);
}

.bg2 
{
  background-image: url(/another/image/url/there.jpg);
}

// in JS
// based on value of imageUrl, determine what class to remove and what class to add.
$('myOjbect').removeClass('bg1').addClass('bg2');

duancao1951
duancao1951 我不这么认为。 它一次只对元素应用一个类
接近 2 年之前 回复
duanfangfei5558
duanfangfei5558 使用这样的类也是我的偏好,因为它可以让你在代码和样式之间保持清晰的分离。 然后我可以在css中更改我的所有图像和动画(通过媒体选择器等)而不会弄乱代码。 如果您将图像保留在代码之外,则无需搜索所有代码!
大约 4 年之前 回复
dongzhang7382
dongzhang7382 这实际上是推荐的解决方案吗? 这似乎不必要地需要更多信息,例如 如果有第三个可能的背景图像,您将需要删除所有其他背景图像,或者跟踪“当前”图像。 并且还有配置细节,例如.css文件中的这些URI让我发疯。 :笑脸:我必须搜索所有代码!
6 年多之前 回复
drrvnbwle80177811
drrvnbwle80177811 这将加载两个图像。
6 年多之前 回复
dongmeng1402
dongmeng1402 这比直接解决方案更好,更好。
7 年多之前 回复
doumen6605
doumen6605 这是一种更好的方法,因为它可以让你使用css预处理器。
大约 8 年之前 回复



这是我的代码:</ p>

 $('body')。css('background-  image','url(“/ apo / 1.jpg”)'); </ pre> 

享受,朋友</ p>
</ div>

展开原文

原文

Here is my code:

$('body').css('background-image', 'url("/apo/1.jpg")');

Enjoy, friend



除了其他答案,您还可以使用“背景”。 当您想要设置与背景使用图像的方式相关的其他属性时,这尤其有用,例如:</ p>

  $(“myObject”)。css(“  background“,”transparent url('“+ imageURL +”')no-repeat right top“); 
</ code> </ pre>
</ div>

展开原文

原文

Further to the other answers, you can also use "background". This is particularly useful when you want to set other properties relating to the way the image is used by the background, such as:

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");

douji1877
douji1877 这现在不起作用。
大约 4 年之前 回复
douhan4812
douhan4812 当我认为原始操作使用背景而非背景图像时,这个答案更有意义。 我已经修改了我的答案以使其更有意义,无论如何我将把它留给后人。
7 年多之前 回复



救援的字符串插值。</ p>

  let imageUrl ='imageurl.png'  ; 
$('myOjbect')。css('background-image',url($ {imageUrl}));
</ code> </ pre>
</ div>

展开原文

原文

String interpolation to the rescue.

let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);



对于那些使用实际URL而不是变量的人:</ p>

  $('  myObject')。css('background-image','url(../../ example / url.html)'); 
</ code> </ pre>
</ div>

展开原文

原文

For those using an actual URL and not a variable:

$('myObject').css('background-image', 'url(../../example/url.html)');



尝试修改“style”属性:</ p>

  $('myObject')  .attr('style','background-image:url(“'+ imageUrl +'”)'); 
</ code> </ pre>
</ div>

展开原文

原文

Try modifying the "style" attribute:

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');

ds12093213
「已注销」 将取代所有其他风格。 不建议
2 年多之前 回复



您需要在imageUrl之前和之后包含双引号(“),如下所示:</ p>

< pre> $('myOjbect')。css('background-image','url(“'+ imageUrl +'”)');
</ code> </ pre>

这样,如果图像有空格,它仍然会被设置为属性。</ p>
</ div>

展开原文

原文

You'll want to include double quotes (") before and after the imageUrl like this:

$('myOjbect').css('background-image', 'url("' + imageUrl + '")');

This way, if the image has spaces it will still be set as a property.

douyangcheng4965
douyangcheng4965 通过,执行$('#elem')。css('background-image','url('+ encodeURIComponent(thumbData.url)+')'); 给了我background-image:url(“%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg”);
大约 3 年之前 回复
douchen5971
douchen5971 如果您的部分网址已包含网址转义字符,则encodeURIComponent将无效。 你应该在imageUrl中逃避潜在的双引号字符:$('myObject')。css('background-image','url(“'+ imageUrl.replace(/”/ g,'\\“')+'” )');
4 年多之前 回复
douwen3836
douwen3836 这解决了我。 我需要双引号。 我的图像名称包含空格。 否则,什么都不会发生。 我可以得到类似$('。myObject')的东西.css('background-color','green'); 工作,但没有双引号不更改图像。 谢谢!
大约 6 年之前 回复
dongyi9484
dongyi9484 报价不是必需的:stackoverflow.com/questions/2168855/css-url-are-quotes-needed
7 年多之前 回复
dpb75177
dpb75177 在这种情况下,它应该是$('myObject')。css('background-image','url('+ encodeURIComponent(imageUrl)+')');
7 年多之前 回复
dtwye28880
dtwye28880 网址中不能包含空格。 空间需要编码。
7 年多之前 回复



我遇到的问题是,我在结尾处添加了一个分号; </ code> url()</ code>值,阻止代码工作。</ p>

NOT WORKING CODE:</ em> </ strong> </ p>

  $('#image_element')。css('background-image','url(http://example.com/img  .jpg); </ strong>'); </ code> </ pre> 

工作代码:</ strong> </ p>

   $('#image_element')。css('background-image','url(http://example.com/img.jpg)'); 
</ code> </ pre>
\ n

注意工作代码末尾省略的分号; </ code>。 我根本就不知道正确的语法,而且很难注意到它。 希望这可以帮助其他人在同一条船上。</ p>
</ div>

展开原文

原文

The problem I was having, is that I kept adding a semi-colon ; at the end of the url() value, which prevented the code from working.

NOT WORKING CODE:

$('#image_element').css('background-image', 'url(http://example.com/img.jpg);');

WORKING CODE:

$('#image_element').css('background-image', 'url(http://example.com/img.jpg)');

Notice the omitted semi-colon ; at the end in the working code. I simply didn't know the correct syntax, and it's really hard to notice it. Hopefully this helps someone else in the same boat.



 $('myObject')。css({'background-image':'url(imgUrl)',}); </  pre> 
</ div>

展开原文

原文

$('myObject').css({'background-image': 'url(imgUrl)',});

duanreng3439
duanreng3439 这不起作用,因为网址包含在单引号中。
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问