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

IT技术 javascript jquery css
2021-01-26 13:09:24

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

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

这似乎不起作用，因为：

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

返回none。

任何想法，我做错了什么？

6个回答

你可能想要这个（使它像一个普通的 CSS 背景图像声明）：

$('myObject').css('background-image', 'url(' + imageUrl + ')');
我是这样做的 - 但是“url”和左括号之间的空格导致我的代码失败。复制/粘贴你的并意识到这个问题。谢谢！
2021-03-20 13:09:24
url(<your url>) 对我不起作用。该值必须在引号内，即 url("<your url>") 或 url('<your url>')。
2021-03-28 13:09:24
我在这个脚本中使用了你的代码，但得到了 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) + ')'); }); 知道为什么吗？
2021-03-29 13:09:24

您需要在 imageUrl 之前和之后包含双引号 (")，如下所示：

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

这样，如果图像有空格，它仍将被设置为属性。

在这种情况下，应该是$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');
2021-03-22 13:09:24
顺便说一句，做$('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');给了我background-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");
2021-04-02 13:09:24
encodeURIComponent如果您的 URL 的一部分已经包含 URL 转义字符，则将不起作用。不过，您应该在 imageUrl 中转义潜在的双引号字符：$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');
2021-04-07 13:09:24
这为我解决了。我需要有双引号。我的图像名称确实包含空格。否则，什么都不会发生。我可以得到类似$('.myObject').css('background-color', 'green'); 的工作，但不能在没有双引号的情况下更改图像。谢谢！
2021-04-08 13:09:24
2021-04-09 13:09:24

除了其他人的正确建议之外，我发现切换 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');
这是一种更好的处理方式，因为它允许您使用 css 预处理器。
2021-03-22 13:09:24
这很棒，比更直接的解决方案要好得多。
2021-03-22 13:09:24
不过，这将加载两个图像。
2021-03-28 13:09:24
使用这样的类也是我的偏好，因为它可以让您在代码和样式之间保持清晰的分离。然后我可以在 css 中更改我的所有图像和动画（通过媒体选择器等），而不会弄乱代码。如果您将图像保留在代码之外，则不必搜索整个代码！
2021-04-05 13:09:24
这实际上是推荐的解决方案吗？这似乎不必要地需要更多信息，例如，如果有第三个可能的背景图像，您将需要删除所有其他背景图像，或者跟踪“当前”图像。还有配置细节，比如 .css 文件中的这些 URIs 让我发疯。:smiley: 我必须搜索所有代码！
2021-04-06 13:09:24

这是我的代码：

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

享受，朋友

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

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");
当我认为原始操作使用背景而不是背景图像时，这个答案更有意义。我已经修改了我的答案以使其更有意义，无论如何我都会把它留在这里供后代使用。
2021-04-09 13:09:24
其它你可能感兴趣的问题
上一篇Javascript - 获取两个日期之间的日期数组 下一篇javascript如何上传blob？