我可以得到div的背景图片url?

我有一个button,当我点击它时,我想提醒#div1的背景图片url。

可能吗?

在可能的情况下,我通常更喜欢.replace()正则expression式,因为它通常更容易阅读: http : //jsfiddle.net/mblase75/z2jKA/2

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

是的,这是可能的:

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

我稍微改进了答案,它处理扩展的CSS定义,如:

 background-image: url(http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8fhttp://img.dovov.comshared/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/359de8fhttp://img.dovov.comshared/noise-1.png" 

如前所述,Blazemongers解决scheme无法删除引号(例如Firefox返回)。 由于我发现Rob Ws的解决scheme相当复杂,我在这里添加了2分钱:

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

我认为使用这个正则expression式是错误的,主要是由于

  • 任务的简单性
  • 运行一个正则expression式总是比切割一个string更强的CPU /更长的时间。

由于url(“”)组件是常量,因此修剪您的string:

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

我正在使用这个

  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 } 

使用一个调用来replace (regex版本): var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');

这是一个简单的正则expression式,它将从返回的string中移除url("")

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