我可以獲得 div 的背景圖片網址嗎？

Question

我有一個按鈕，當我點擊它時，我想提醒#div1的background-image URL。

是否有可能？

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);
});

Answer 7

這是一個簡單的正則表達式，它將從返回的字符串中刪除url("和") 。

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

Answer 8

僅使用一次調用來replace （正則表達式版本）： var bgUrl = $('#element-id').css('background-image').replace(/url\\(("|')(.+)("|')\\)/gi, '$2');