我可以获取div的背景图片网址吗？

88

我有一个按钮，当我单击它时，我想提醒的background-imageURL #div1。

可能吗？

— jQuery野兽
source

这回答了你的问题了吗？从background-image属性获取URL

— Jason C

188

我通常更喜欢.replace()正则表达式，因为它通常更易于阅读：http : //jsfiddle.net/mblase75/z2jKA/2

    $("div").click(function() {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
        alert(bg);
    });

— 开拓者
source

4

如果背景图片网址是什么样的url(my%20picture%20Copy$1$.jpg)呢？您的替换导致bg变量为my%20picture%20Copy\(1\.jpg)。它还不会删除引号（例如url("the picture.jpg")）。

— 本杰明·曼斯

1

然后，您将不得不添加一些代码以取消转义%20和括号，或者首先问自己是否真的需要它们。如果引用问题，请改用RobW的解决方案。

— Blazemonger

1

不处理多个背景图像。

— Marcel

1

@Marcel Easy，如果您只有图像；只需将字符串用逗号分隔即可。如果那里有线性渐变之类的东西，则比较棘手，因为它们也有逗号。

— Blazemonger，2014年

1

如果背景图片类似，则将无法正常工作

background-image:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4)), url("https://mdn.mozillademos.org/files/7693/catfront.png")

— glasspill 2016年

52

是的，这是可能的：

$("#id-of-button").click(function() {
    var bg_url = $('#div1').css('background-image');
    // ^ Either "none" or url("...urlhere..")
    bg_url = /^url\((['"]?)(.*)\1\)$/.exec(bg_url);
    bg_url = bg_url ? bg_url[2] : ""; // If matched, retrieve url, otherwise ""
    alert(bg_url);
});

— 罗伯·W
source

我想提醒它不要设置它。警报或在console.log上写路径

— jQuerybeast 2012年

在控制台上尝试写：console.log（$（'＃div1'）。css（'background-image'））

— Mandeep Pasbola 2012年

@RobW谢谢。这版画URL（google.com），而不仅仅是域

— jQuerybeast

@jQuerybeast我的代码未设置CSS。.css当使用一个参数调用时，该方法返回属性的值。

— 罗布W

2

@tim不，这只是更准确。想象一下：background-image: url('photo(2012).png');用您的一点点代码，您将得到“'photo（2012.png'）”，这显然是不正确的。

— 罗伯W

21

我的回答略有改善，它可以处理扩展的CSS定义，例如：

background-image: url(http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png), -webkit-linear-gradient(top, rgb(81, 127, 164), rgb(48, 96, 136))

JavaScript代码：

var bg = $("div").css("background-image")
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')

结果：

"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"

— 迈克尔·史派克
source

如果背景图片类似于background-image，则此方法将无效：linear-gradient（rgba（0,0,0,0.2），rgba（0,0,0,0.4）），url（“ mdn.mozillademos .org / files / 7693 / catfront.png“）

— glasspill 2016年

10

如前所述，Blazemongers解决方案无法删除引号（例如Firefox返回）。由于我发现Rob Ws解决方案相当复杂，因此在这里加2美分：

$('#div1').click (function(){
  url = $(this).css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
  alert(url);
})

— 亚历山大·普雷斯伯
source

6

我认为为此使用正则表达式是错误的，主要是由于

任务的简单性
运行正则表达式总是比切割字符串要占用更多的CPU资源/更长的时间。

由于url（“和”）组件是常量，因此请像下面这样修剪字符串：

$("#id").click(function() {
     var bg = $(this).css('background-image').trim();
     var res = bg.substring(5, bg.length - 2);
     alert(res);
});

— 中间调
source

看起来是一个很好的解决方案。但这在Safari中不起作用。通过这种方法，您将获得“ ttps：//.....jp”而不是“ https：//.....jpg”

— 。.– IndikatorDesign

我相信"s在此语法中是可选的。url(myimg.jpg)在这里工作正常。

— 亚伯拉罕·穆尔西亚诺·本扎登

5

我正在用这个

  function getBackgroundImageUrl($element) {
    if (!($element instanceof jQuery)) {
      $element = $($element);
    }

    var imageUrl = $element.css('background-image');
    return imageUrl.replace(/(url\(|\)|'|")/gi, ''); // Strip everything but the url itself
  }

— 伯蒂
source

1

工作正常。谢谢！

— IndikatorDesign

4

这是一个简单的正则表达式，它将从返回的字符串中删除url("and ")。

var css = $("#myElem").css("background-image");
var img = css.replace(/(?:^url\(["']?|["']?\)$)/g, "");

— 亚伯拉罕·穆尔西亚诺·本扎登（Abraham Murciano Benzadon）
source

1

仅使用一个调用replace（正则表达式版本）： var bgUrl = $('#element-id').css('background-image').replace(/url$("|')(.+)("|')$/gi, '$2');

— 奥格
source