Danh sách tất cả hình nền trong DOM

Question

Cách tốt nhất để tìm tất cả hình nền trên một trang nhất định bằng cách sử dụng javascript là gì?

Kết quả cuối cùng lý tưởng sẽ là một mảng của tất cả các url.

Answer 1

Đây là một vấn đề phức tạp. Lý do là hình nền có thể được áp dụng cho phần tử bằng cách sử dụng một tệp CSS riêng biệt. Bằng cách này, phân tích cú pháp tất cả các đối tượng trong DOM và kiểm tra hình nền của chúng sẽ không hoạt động.

Một trong những cách tôi có thể thấy là tạo một HttpHandler đơn giản sẽ hoạt động trên tất cả các loại hình ảnh. Khi hình ảnh được tham chiếu bên trong tệp CSS, chúng được tải xuống dưới dạng một thực thể riêng biệt. Điều này có nghĩa HttpHandler sẽ có thể nắm bắt được loại hình ảnh và sau đó thực hiện trên nó.

Có thể giải pháp phía máy chủ là cách tốt nhất để thực hiện điều này!

Answer 2

Một trong những cách là xem qua tất cả đối tượng tài liệu và nhận các kiểu đó. Sau đó kiểm tra thuộc tính style.background trên "url (" string và nếu nó phù hợp thì lấy đường dẫn giữa "url (" và ")" và đặt nó vào mảng. Thuật toán cho JS. Hãy thử tự làm. . đang

Answer 3

Nếu không sử dụng jQuery, bạn có thể làm:

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 4

// 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 5

Dưới đây là một cách để kiểm tra những gì nền url có trong phong cách trên trang (xem Ma, không có 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 

Với điều này trên trang, bạn có thể nhận được một mảng của các url với npup.getBackgroundUrls(); tôi đã làm một số (superfluos?) Cho ý kiến ​​trong đoạn code đó giải thích cách thức nó đi về. Nó không lấy phong cách nội tuyến, nhưng tôi nghĩ rằng không có vấn đề gì với bạn? Kiểu trong trang tính bên ngoài và trong các thẻ <style> trên trang là được nhặt rác.

Những thói quen rất dễ dàng để sửa đổi nếu bạn muốn giữ một số, hoặc giữ các hiệp hội các quy tắc thực tế rằng một url được tìm thấy trong, vv