如何使用javascript在html中获取元素背景图像

Question

I want to get all the html page elements' background images that are set using css or the element background property.

how can I do this using javascript?

Answer 1

You could us jquery:

imgs = [];
$("*").each(function(i) { 
  if($(this).css("background-image") != "none") { 
    imgs.push($(this).css("background-image")); 
  } 
});

Answer 2

The getStyle() function below was taken from http://www.quirksmode.org/dom/getstyles.html#link7 (and slightly modified).

Of course you need to make sure the DOM is ready. An easy way to do that is to place the script toward the bottom of the page, just inside the closing </body> tag.

<script type="text/javascript">
    function getStyle(x, styleProp) {
        if (x.currentStyle) var y = x.currentStyle[styleProp];
        else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
        return y;
    }

       // Get all elements on the page
    var elements = document.getElementsByTagName('*');

       // store the results
    var results = [],
        i = 0,
        bgIm;

       // iterate over the elements
    for (;elements[i];i++) {
             // get the background-image style property
        bgIm = getStyle(elements[i], 'background-image');

             // if one was found, push it into the array
        if (bgIm && bgIm !== 'none') {
            results.push(bgIm);
        }
    }

       // view the console to see the result
    console.log(results);
</script>

It sounded like you want the path to the images themselves.

If you wanted the actual elements, change:

results.push(bgIm);

to:

results.push(elements[i]);