我可以获得 div 的背景图像 url 吗？

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

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

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

由于 url(" 和 ") 组件是不变的，请像这样修剪字符串：

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

Answer 6

我正在用这个

  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 7

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

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

Answer 8

仅使用一次 replace 调用（正则表达式版本）：
<代码>
var bgUrl = $('#element-id').css('背景图像').replace(/url\(("|')(.+)("|')\)/gi, '$2' ）；

Answer 9

我的两分钱。
如果 CSS 中的 background-image 属性被 background 属性覆盖，那么这些解决方案都不起作用。
假设您设置了 background-image 属性，并且您不想在浏览器中看到它，您只需要出于某种目的在 jQuery 中获取该值。
因此，如果您有这样的内容：

<div class="myDivWithBackground">
 <p>Lorem Ipsum</p>
</div>
<style>
.myDivWithBackground{
 background-image: URL('url-here.jpg')
}
div.myDivWithBackground{
 background: #fff!important
}
</style>

则 $('div').css('background-image'); 返回 none网址。

如果您需要将背景保持为白色，并在 jQuery 中获取background-image URL值，则替换背景 与 伪元素，如下所示：

<style>
    .myDivWithBackground{
     background-image: URL('url-here.jpg')
    }
    div.myDivWithBackground:after{
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
      top: 0;
      position: absolute;
    }
    div.myDivWithBackground p{
      position: relative;
      z-index: 9999;
    }
</style>

现在 $('div').css('background-image'); 返回URL('url-here.jpg')，而不是无。