我如何在 JavaScript 中获取元素的background-imageURL <div>？例如，我有这个：
<div style="background-image:url('http://www.example.com/img.png');">...</div>
我怎么会得到公正的网址background-image？
如何使用 JavaScript 获取元素的背景图片 URL？
IT技术
javascript
css
2021-01-19 03:23:45
6个回答
你可以试试这个：
var img = document.getElementById('your_div_id'),
style = img.currentStyle || window.getComputedStyle(img, false),
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
编辑：
根据@Miguel 和下面的其他评论，如果您的浏览器（IE/FF/Chrome...）将其添加到 url，您可以尝试删除额外的引号：
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
如果可能包含单引号，请使用： replace(/['"]/g, "")
只是为了以防万一其他人有类似的想法，您也可以使用正则表达式：
var url = backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1];
然而，根据 jsPerf：http ://jsperf.com/match-vs-slice-and-replace，似乎@Praveen 的解决方案实际上在 Safari 和 Firefox 中表现更好
如果您想考虑值包含引号但不确定它是双引号还是单引号的情况，您可以执行以下操作：
var url = backgroundImage.slice(4, -1).replace(/["']/g, "");
试试这个：
var url = document.getElementById("divID").style.backgroundImage;
alert(url.substring(4, url.length-1));
或者，使用replace：
url.replace('url(','').replace(')','');
// Or...
backgroundImage.slice(4, -1).replace(/["']/g, "");
首先，您需要返回您的背景图片内容：
var img = $('#your_div_id').css('background-image');
这将返回如下 URL：
"url(' http://www.example.com/img.png ')"
然后您需要删除此 URL 中不需要的部分：
img = img.replace(/(url\(|\)|")/g, '');
const regex = /background-image:url\(["']?([^"']*)["']?\)/gm;
const str = `<div style="background-image:url('http://www.example.com/img.png');">...</div>`;
let m;
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});
}