如何使用 JavaScript 获取元素的背景图片 URL？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14013131/
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
How to get background image URL of an element using JavaScript?
提问by celliott1997
How would I get the background-imageURL of a <div>element in JavaScript?
For example, I have this:
如何在 JavaScript 中获取元素的background-imageURL <div>？例如，我有这个：
<div style="background-image:url('http://www.example.com/img.png');">...</div>
How would I get justthe URL of the background-image?
我如何只获得的 URL background-image？
回答by pala?н
You can try this:
你可以试试这个：
var img = document.getElementById('your_div_id'),
style = img.currentStyle || window.getComputedStyle(img, false),
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
// Get the image id, style and the url from it
var img = document.getElementById('testdiv'),
style = img.currentStyle || window.getComputedStyle(img, false),
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
// Display the url to the user
console.log('Image URL: ' + bi);<div id="testdiv" style="background-image:url('http://placehold.it/200x200');"></div>Edit:
编辑：
Based on @Miguel and other comments below, you can try this to remove additional quotation marks if your browser (IE/FF/Chrome...) adds it to the url:
根据@Miguel 和下面的其他评论，如果您的浏览器（IE/FF/Chrome...）将其添加到 url，您可以尝试删除额外的引号：
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
and if it may includes single quotation, use: replace(/['"]/g, "")
如果可能包含单引号，请使用： replace(/['"]/g, "")
回答by sawyer
Just to add to this in case anyone else has a similar idea, you could also use Regex:
为了以防万一其他人有类似的想法，您也可以使用正则表达式：
var url = backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1];
However it seems like @Praveen's solution actually performs better in Safari and Firefox, according to jsPerf: http://jsperf.com/match-vs-slice-and-replace
然而，根据 jsPerf：http://jsperf.com/match-vs-slice-and-replace，似乎@Praveen 的解决方案实际上在 Safari 和 Firefox 中表现更好
If you want to account for cases where the value includes quotes but are unsure whether it's a double or single quote, you could do:
如果您想考虑值包含引号但不确定它是双引号还是单引号的情况，您可以执行以下操作：
var url = backgroundImage.slice(4, -1).replace(/["']/g, "");
回答by Alanoud Just
First of all you need to return your background-image content:
首先，您需要返回您的背景图片内容：
var img = $('#your_div_id').css('background-image');
This will return the URL as following:
这将返回如下 URL：
"url('http://www.example.com/img.png')"
"url(' http://www.example.com/img.png')"
Then you need to remove the un-wanted parts of this URL:
然后您需要删除此 URL 中不需要的部分：
img = img.replace(/(url\(|\)|")/g, '');
回答by Praveen Kumar Purushothaman
Try this:
尝试这个：
var url = document.getElementById("divID").style.backgroundImage;
alert(url.substring(4, url.length-1));
Or, using replace:
或者，使用replace：
url.replace('url(','').replace(')','');
// Or...
backgroundImage.slice(4, -1).replace(/["']/g, "");
