DOM中所有背景图像的列表

Question

使用javascript在给定页面上查找所有背景图像的最佳方法是什么？

理想的最终结果将是所有网址的数组.

Answer 1

// alert(getallBgimages())

function getallBgimages(){
 var url, B= [], A= document.getElementsByTagName('*');
 A= B.slice.call(A, 0, A.length);
 while(A.length){
  url= document.deepCss(A.shift(),'background-image');
  if(url) url=/url\(['"]?([^")]+)/.exec(url) || [];
  url= url[1];
  if(url && B.indexOf(url)== -1) B[B.length]= url;
 }
 return B;
}

document.deepCss= function(who, css){
 if(!who || !who.style) return '';
 var sty= css.replace(/\-([a-z])/g, function(a, b){
  return b.toUpperCase();
 });
 if(who.currentStyle){
  return who.style[sty] || who.currentStyle[sty] || '';
 }
 var dv= document.defaultView || window;
 return who.style[sty] || 
 dv.getComputedStyle(who,"").getPropertyValue(css) || '';
}

Array.prototype.indexOf= Array.prototype.indexOf || 
 function(what, index){
 index= index || 0;
 var L= this.length;
 while(index< L){
  if(this[index]=== what) return index;
  ++index;
 }
 return -1;
}

Answer 2

不使用 jQuery，您可以执行以下操作：

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) ) );
         }
     }
});

Answer 3

这是一个复杂的问题。原因是背景图像可以通过使用单独的 CSS 文件应用于元素。这种方式解析 DOM 中的所有对象并检查它们的背景图像将不起作用。

我看到的方法之一是创建一个简单的 HttpHandler ，它将适用于所有类型的图像。当在 CSS 文件中引用图像时，它们会作为单独的实体下载。这意味着 HttpHandler 将能够捕获图像的类型，然后对其执行。

也许服务器端解决方案是解决这个问题的最佳方法！