我可以得到div的背景图片网址吗？

答

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

+4

如果背景图片的URL类似'url（my％20picture％20Copy \（1 \）。jpg）'？您的替换会导致bg变量为'my％20picture％20Copy \（1 \ .jpg）'。它也不会去除引号（例如'url（“picture.jpg”））。 – 2013-02-05 17:31:54

+1

然后，您必须添加一些代码来解除“％20”和括号，或者首先问自己是否真的需要它们。如果在某个问题中引用，请改为使用[RobW]（http://stackoverflow.com/a/8809891/901048）的解决方案。 – Blazemonger 2013-02-05 17:33:58

+0

感谢您的jsfiddle链接！ – AmirModiri 2013-03-12 09:43:50

答

是的，这是可能的：

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

+0

我想提醒它不要设置它。在console.log – jQuerybeast 2012-01-10 20:14:47

+0

上警告或写入路径并打55秒。 – redDevil 2012-01-10 20:16:46

+0

在控制台上写入try：console.log（$（'＃div1'）.css（'background-image'）） – 2012-01-10 20:18:02

答

如前所述，Blazemongers解决方案未能删除引号（例如由Firefox返回）。因为我觉得罗布Ws的解决方案是相当复杂的，在这里添加我的2美分：

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

答

我已略有改善的答案，它处理像扩展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"

+0

如果背景图像是背景图像：线性梯度（rgba（0,0,0,0.2），rgba（0,0,0,0.4）），url（“https： //mdn.mozillademos.org/files/7693/catfront.png“） – glasspill 2016-02-17 15:34:54

+0

你是酷男：*谢谢 – kaxi1993 2016-06-20 07:33:50

答

我用这一个

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 
    }

+1

工作正常。谢谢！ – IndikatorDesign 2017-03-25 07:06:19

答

我觉得用正则表达式这种故障主要是由于

任务
运行正则表达式的简单性总是更密集CPU /比切割一个字符串更长。

由于URL（ “和”）成分是恒定的，修剪你的字符串，像这样：使用

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

+0

看起来像一个很好的解决方案。但是这在Safari中不起作用。通过这种方法，您可以获得“ttps：//.....jp”而不是“https：//.....jpg”。 – IndikatorDesign 2017-03-25 07:03:06

+0

我相信在这个语法中'''是可选的'url myimg.jpg）'在这里工作得很好。 – 2017-07-10 11:22:11

答

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

答

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

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

我可以得到div的背景图片网址吗？

相关推荐