jQuery 我可以获得 div 的背景图片网址吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8809876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I get div's background-image url?
提问by jQuerybeast
I have a button of which when I click it I want to alert the background-imageURL of #div1.
我有一个按钮，当我点击它，我想提醒background-image的URL #div1。
Is it possible?
是否可以？
回答by Blazemonger
I usually prefer .replace()to regular expressions when possible, since it's often easier to read: http://jsfiddle.net/mblase75/z2jKA/2
.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);
});
回答by Rob W
Yes, that's possible:
是的，这是可能的：
$("#id-of-button").click(function() {
var bg_url = $('#div1').css('background-image');
// ^ Either "none" or url("...urlhere..")
bg_url = /^url\((['"]?)(.*)\)$/.exec(bg_url);
bg_url = bg_url ? bg_url[2] : ""; // If matched, retrieve url, otherwise ""
alert(bg_url);
});
回答by Michael Spector
I have slightly improved answer, which handles extended CSS definitions like:
我稍微改进了答案，它处理扩展的 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 code:
JavaScript 代码：
var bg = $("div").css("background-image")
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
Result:
结果：
"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"
回答by Alexander Presber
As mentioned already, Blazemongers solution is failing to remove quotes (e.g. returned by Firefox). Since I find Rob Ws solution to be rather complicated, adding my 2 cents here:
如前所述，Blazemongers 解决方案无法删除引号（例如由 Firefox 返回）。因为我发现 Rob Ws 的解决方案相当复杂，所以在这里添加我的 2 美分：
$('#div1').click (function(){
url = $(this).css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
alert(url);
})
回答by Middletone
I think that using a regular expression for this is faulty mainly due to
我认为为此使用正则表达式是错误的，主要是由于
- The simplicity of the task
- Running a regular expression is always more cpu intensive/longer than cutting a string.
- 任务的简单性
- 运行正则表达式总是比切割字符串更占用 CPU/更长的时间。
Since the url("and ")components are constant, trim your string like so:
由于url("和")组件是常量，因此可以像这样修剪字符串：
$("#id").click(function() {
var bg = $(this).css('background-image').trim();
var res = bg.substring(5, bg.length - 2);
alert(res);
});
回答by Berty
I'm using this one
我正在使用这个
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
}
回答by Abraham Murciano Benzadon
Here is a simple regex which will remove the url("and ")from the returned string.
这是一个简单的正则表达式，它将从返回的字符串中删除url("和")。
var css = $("#myElem").css("background-image");
var img = css.replace(/(?:^url\(["']?|["']?\)$)/g, "");
回答by Ogg
Using just one call to replace(regex version):
var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');
仅使用一次调用replace（正则表达式版本）：
var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');
