13

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

理想的最终结果将是所有 url 的数组。

4

7 回答 7

12

//警报(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;
}
于 2010-03-12T05:49:05.120 回答
5

在不使用 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) ) );
         }
     }
});
于 2010-03-12T05:00:35.720 回答
2

One of the way is to look through all document object and get there styles. Then test style.background attribute on "url(" string and if it matches then get path between "url(" and ")" and put it into array. Algorithm for JS. Try to do it yourself. Will find troubles - came with code.

于 2010-03-12T04:39:52.323 回答
1

这是一种检查页面样式中有哪些背景 url 的方法（看 Ma，没有 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

有了这个在页面上，你可以得到一个url数组，npup.getBackgroundUrls(); 我在代码中做了一些（多余的？）注释来解释它是如何进行的。它不包含内联样式，但我认为这对您来说没问题？外部工作表和<style>页面标签中的样式被清除。

如果您想保持计数或保持与找到 url 的实际规则的关联等，该例程很容易修改。

于 2010-03-16T11:26:41.913 回答
0

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

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

也许服务器端解决方案是最好的解决方案！

于 2010-03-12T04:28:31.070 回答
0

我需要这个功能，但不幸的是它们都太重了。所以考虑一下，这是我的解决方案，如果它可以帮助的话。

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

不适用于外部样式表中的背景图像。

于 2018-12-19T16:33:51.343 回答
0

获取具有内联背景样式的集合元素

document.querySelectorAll('[style*="background"]')
于 2020-01-29T20:00:26.547 回答