使用jQuery CSS属性设置背景图像

2020/09/29 09:41 · javascript ·  · 0评论

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

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

这似乎不起作用,因为:

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

返回none

任何想法,我在做什么错?

您可能想要这样做(使其像普通的CSS背景图像声明一样):

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

您需要像这样在imageUrl前后加上双引号(“):

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

这样,如果图像中有空格,它将仍然设置为属性。

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

// 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');

这是我的代码:

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

享受,朋友

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

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

对于使用实际URL而不是变量的用户:

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

尝试修改“样式”属性:

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

字符串插值可以解救。

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

我遇到的问题是,我一直;url()的末尾添加分号,这使代码无法正常工作。

不适用的代码:

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

工作代码:

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

注意;工作代码末尾省略的分号我只是不知道正确的语法,因此很难注意到它。希望这可以帮助同一条船上的其他人。

别忘了jQuery css函数允许传递对象,这允许您同时设置多个项目。回答的代码将如下所示:

$(this).css({'background-image':'url(' + imageUrl + ')'})

$('myObject')。css({'background-image':'url(imgUrl)',});
本文地址:http://javascript.askforanswer.com/shiyongjquery-cssshuxingshezhibeijingtuxiang.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!