var elementNames = ["div", "body", "td"] // Put all the tags you want bg images for here
var allBackgroundURLs = new Array();
elementNames.forEach( function(tagName) {
var tags = document.getElementsByTagName(tagName);
var numTags = tags.length;
for (var i = 0; i < numTags; i++) {
tag = tags[i];
if (tag.style.background.match("url")) {
var bg = tag.style.background;
allBackgroundURLs.push(bg.substr(bg.indexOf("url") + 4, bg.lastIndexOf(")") - (bg.indexOf("url") + 4) ) );
}
}
});
window.npup = (function (doc) {
var sheets = doc.styleSheets;
var hash = {}, sheet, rules, rule, url, match;
// loop the stylesheets
for (var sheetIdx=0, sheetsLen=sheets.length; sheetIdx<sheetsLen; ++sheetIdx) {
sheet = sheets[sheetIdx];
// ie or w3c stylee rules property?
rules = sheet.rules ? sheet.rules : sheet.cssRules;
// loop the rules
for (var ruleIdx=0, rulesLen=rules.length; ruleIdx<rulesLen; ++ruleIdx) {
rule = rules[ruleIdx];
if (rule.selectorText && rule.style.cssText) {
// check if there's a style setting we're interested in..
if (rule.style.cssText.match(/background/)) {
// ..and if it has an url in it, put it in the hash
match = /url\(([^)]*)\)/.exec(rule.style.cssText);
if (match) {hash[match[1]] = true;}
}
}
}
}
// return an array of unique urls
var urls = [];
for (url in hash) {urls.push(url);}
// export a getter for what we found
return {
getBackgroundUrls: function () { return urls;}
};
})(document); // submit reference to the document of interest
8条答案
按热度按时间vh0rcniy1#
//alert(getallBgimages())
qnyhuwrf2#
不使用jQuery,你可以:
tgabmvqs3#
其中一种方法是查看所有文档对象并获得样式。然后在“url(“字符串上测试style.background属性,如果匹配,则获取“url(“和“)”之间的路径并将其放入数组中。JS的算法试着自己做。会找麻烦-有代码。
5fjcxozz4#
这里有一种方法来检查页面上的样式中有哪些背景URL(看看Ma,没有jQuery):
有了这个页面上,你可以得到一个数组的网址与
npup.getBackgroundUrls();
我做了一些(superfluos?)在代码中注解,解释它是如何工作的。它不抓取内联样式,但我想这对你来说没有问题吧?外部工作表和页面上<style>
标签中的样式 * 被 * 清除。如果你想保持一个计数,或者保持与一个url被发现的实际规则的关联等,这个例程很容易修改。
zc0qhyus5#
获取具有内联背景样式的集合元素
holgip5t6#
这是一个复杂的问题。原因是背景图像可以通过使用单独的CSS文件应用于元素。这种方式解析DOM中的所有对象并检查它们的背景图像将无法工作。
其中一种方法是创建一个简单的HttpHandler,它可以处理所有类型的图像。当在CSS文件中引用图像时,它们将作为单独的实体下载。这意味着HttpHandler将能够捕获图像的类型,然后在其上执行。
也许服务器端解决方案是解决这个问题的最佳方法!
toe950277#
我需要这个功能,但不幸的是它们都太重了。所以考虑一下,这是我的解决方案,如果它可以帮助。
不支持外部样式表背景图片。
8fq7wneg8#
[...new Set(Array.from(document.querySelectorAll('div')).map(x => window.getComputedStyle(x).getPropertyValue('background-image').split(/[^4],\s*/)).flat())].map(x=>x.replace(/^\s*url\(["']([^"']+)["']\)?\s*$/, '$1'))