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

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

我想获取所有使用css或元素背景属性设置的html页面元素的背景图像。

how can I do this using javascript?

我怎么能用javascript做到这一点?

2 个解决方案

#1

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

下面的getStyle()函数取自http://www.quirksmode.org/dom/getstyles.html#link7(稍作修改)。

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.

当然,您需要确保DOM已准备就绪。一种简单的方法是将脚本放在页面底部,就在结束标记内。

<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]);

#2

You could us jquery:

你可以我们jquery:

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

#1