使用javascript找到給定頁面上所有背景圖片的最好方法是什么？

理想的最終結果應該是所有url的數組。

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

不使用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) ) );
         }
     }
});

一種方法是瀏覽所有的文檔對象并得到它們的樣式。然后測試“url(" string)上的style.background屬性，如果它匹配“url(" and ")”之間的n get路徑，就把它放入數組。JS的算法。試著自己做。會找麻煩——自帶代碼。

這里有一個方法可以檢查頁面上的樣式中有哪些背景URL(看馬，沒有jQuery):

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

在這個頁面上，您可以使用npup.getBackgroundUrls()獲得一個URL數組； 我做了一些(superfluos？)在代碼中進行注釋，解釋它是如何進行的。 它不支持內聯樣式，但我認為這對你來說不成問題？ 外部工作表和& ltstyle & gt頁面上的標簽被清除。

如果您想保持計數，或者保持與url所在的實際規則的關聯，那么這個例程很容易修改。

獲取具有內嵌背景樣式的集合元素

document.querySelectorAll('[style*="background"]')

這是一個復雜的問題。原因是可以通過使用單獨的CSS文件將背景圖像應用于元素。這種方式解析DOM中的所有對象并檢查它們的背景圖像是行不通的。

我看到的一種方法是創建一個簡單的HttpHandler，它可以處理所有類型的圖像。當圖像在CSS文件中被引用時，它們作為一個獨立的實體被下載。這意味著HttpHandler將能夠捕獲圖像的類型，然后在其上執行。

也許服務器端解決方案是最好的方法！

我需要這個功能，但不幸的是它們都太重了。所以想了想，下面是我的解決方案，如果能有幫助的話。

function getAllBgInHtml()
{
    return document.body.innerHTML.match(/background-image.+?\((.+?)\)/gi).map(function(e){ return ((e.match(/background-image.+?\((.+?)\)/i) ||?[])[1] || '').replace(/"|"/g,'') });
}

不適用于外部樣式表中的背景圖像。

[...新集合(array . from(document . query selector all(' div '))。map(x = & gt；window.getComputedStyle(x)。getPropertyValue('背景圖像')。split(/[^4],\s*/)).平())】。map(x = & gt；x.replace(/^\s*url\(["；']([^"']+)[& quot；']\)?\s*$/，' $1 '))

新集合:唯一值 QuerySelectorAll:選擇所有節點 window.getComputedStyle:獲取動態樣式(外部CSS文件) flat():展平數組的數組 split(/[^4],\s*/):如果有多個背景，用逗號分割，但不要用base64分割，... 替換:刪除url(...)