javascript DOM中所有背景图像的列表

gr8qqesn  于 2023-05-16  发布在  Java
关注(0)|答案(8)|浏览(141)

使用javascript找到给定页面上所有背景图片的最佳方法是什么?
理想的最终结果是所有url的数组。

vh0rcniy

vh0rcniy1#

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

qnyhuwrf2#

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

tgabmvqs3#

其中一种方法是查看所有文档对象并获得样式。然后在“url(“字符串上测试style.background属性,如果匹配,则获取“url(“和“)”之间的路径并将其放入数组中。JS的算法试着自己做。会找麻烦-有代码。

5fjcxozz

5fjcxozz4#

这里有一种方法来检查页面上的样式中有哪些背景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

有了这个页面上,你可以得到一个数组的网址与npup.getBackgroundUrls();我做了一些(superfluos?)在代码中注解,解释它是如何工作的。它不抓取内联样式,但我想这对你来说没有问题吧?外部工作表和页面上<style>标签中的样式 * 被 * 清除。
如果你想保持一个计数,或者保持与一个url被发现的实际规则的关联等,这个例程很容易修改。

zc0qhyus

zc0qhyus5#

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

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

holgip5t6#

这是一个复杂的问题。原因是背景图像可以通过使用单独的CSS文件应用于元素。这种方式解析DOM中的所有对象并检查它们的背景图像将无法工作。
其中一种方法是创建一个简单的HttpHandler,它可以处理所有类型的图像。当在CSS文件中引用图像时,它们将作为单独的实体下载。这意味着HttpHandler将能够捕获图像的类型,然后在其上执行。
也许服务器端解决方案是解决这个问题的最佳方法!

toe95027

toe950277#

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

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

不支持外部样式表背景图片。

8fq7wneg

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'))

  • 新集合:唯一值
  • QuerySelectorAll:选择所有节点
  • window.getComputedStyle:获取动态样式(外部CSS文件)
  • flat():展平数组的数组
  • split(/[^4],\s*/):如果有多个背景,请使用逗号分割,但不要使用base64分割。
  • replace:remove url(...)

相关问题