我能获得div的背景图片网址吗？

Question

我有一个按钮,当我点击它时,我想提醒背景图像的URL #div1.

可能吗？

Answer 1

我通常更喜欢.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);
    });

Answer 2

是的,这是可能的:

$("#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);
});

Answer 3

我略微改进了答案,它处理扩展的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"

Answer 4

如前所述,Blazemongers解决方案未能删除引号(例如Firefox返回).因为我觉得Rob Ws解决方案相当复杂,所以在这里加2美分:

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

Answer 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
  }

Answer 6

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

• 任务的简单性
• 运行正则表达式总是比剪切字符串更加cpu密集/更长.

由于url("和")组件是常量,因此修剪字符串如下:

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