如何使用JavaScript获取HTML元素的背景图片

Question

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

如何使用JavaScript实现这一功能？

- Muhamad Bhaa Asfour

---

获取元素当前有效的样式在旧版IE和其他浏览器之间差异很大 - 这是其中一个DOM框架确实能为你节省很多麻烦的情况。 - Pointy

我该如何使用DOM框架来实现这个？ - Muhamad Bhaa Asfour

Answer 1

下面的getStyle()函数取自http://www.quirksmode.org/dom/getstyles.html#link7（稍作修改）。当然，你需要确保DOM已经准备就绪。一种简单的方法是将脚本放置在页面底部，就在闭合的</body>标签内部。

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

听起来你想要图片本身的路径。

如果你想要实际的元素，请更改：

results.push(bgIm);

to:

results.push(elements[i]);

- user113716

---

@M.B.Asfoor：我认为这会起作用。试一下。我可能需要添加一个IE的修复程序。 - user113716

Answer 2

您可以使用jQuery：

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

- stef

---

但是大多数情况下，我们使用背景而不是背景图像。 - Sotiris

background-image 应该可以工作，因为 css() 返回计算后的样式，所以设置方式并不重要。 - RoToRa