如何使用 jQuery 检测网页上的每个背景图像？

Question

是否可以使用 jQuery 查找页面上的所有背景图像？ 我最初的计划是使用：循环遍历每个元素

jQuery("*").each(function() { ... });

，然后检查每个元素是否具有为 .css("background-image") 设置的属性

但这似乎不起作用。 jQuery("*") 看起来性能不太好。

有更好的办法吗？

Answer 1

这对我有用：

   <div style="background-image:url('image1.jpg')">
        <div style="background-image:url('image2.jpg')">
        </div>
   </div>

和jquery：

   $('*').each(function(i, item) {
       console.log($(item).css('background-image'));
   });

控制台日志分别输出image1.jpg和image2.jpg。

不，使用 * 选择器非常非常慢。它实际上会检查所有内容（甚至是非常非常不可能有背景图像的内联元素。您最好选择单个标签类型（例如 div）或按类或 id 进行搜索。这些将比 * 选择器更有效。

祝你好运。

Answer 2

虽然我意识到这个问题已经得到解答，并且有一个可接受的答案，但似乎值得指出的是，当前接受的解决方案只会可靠地通知您使用 in- 设置的 background-image 。 line style 属性。

要访问通过外部样式表分配的元素的背景图像，以下内容更可靠：

// here we're retrieving all elements on the page,
// by passing a wildcard ('*') to the
// document.getElementsByTagName() method:
var elems = document.getElementsByTagName('*'),

  // creating an empty Array to hold the found
  // background-images:
  backgrounds = [];

// creating a for loop to iterate over the elements,
// initialising the i variable to 0 (as JavaScript
// indices start from zero), len is initialised as
// as the length of the elems Array;
// while len is less than the length of elements,
// the loop will run, incrementing the i variable
// each time in order to iterate over the Array:
for (var i = 0, len = elems.length; i < len; i++) {

  // here we use the window.getComputedStyle()
  // method to retrieve the styles applied to the
  // current element - in the Array of elements over
  // which we're iterating - whether applied by CSS
  // or via the style attribute. To retrieve a particular
  // property-value, we use the getPropertyValue()
  // method with the relevant property passed as
  // an argument. As the default-value of background-
  // image is 'none' we explicitly test that the
  // retrieved property-value is not-equal to 'none':
  if (window.getComputedStyle(elems[i], null).getPropertyValue('background-image') != 'none') {

    // here we push the property-value into the Array,
    // using Array.prototype.push():
    backgrounds.push(window.getComputedStyle(elems[i], null).getPropertyValue('background-image'));
  }
}

// logging the values to the console:
console.log(backgrounds);

body {
  background: transparent url(http://davidrhysthomas.co.uk/linked/astrid_avatar.png) 50% 50% no-repeat;
}

ul {
  background: transparent url(http://davidrhysthomas.co.uk/img/dexter.png) 0 50% no-repeat;
  margin: 0 0 1em 0;
}

section p {
  background: transparent url(http://davidrhysthomas.co.uk/img/mandark.png) 100% 50% no-repeat;
  margin: 0 0 1em 0;
  width: 50%;
  margin-left: 45%;
}

<div id="elem1">
  <ul>
    <li style="background-image: url(http://www.davidrhysthomas.co.uk/img/v_thumbnail.png)">List element one</li>
    <li>List element two</li>
  </ul>
</div>
<section>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>

JS Fiddle 演示。

然而，一种更新的方法如下：

// here we initialise the NodeList of elements using the
// 'const' declaration, since it's not expected to change:
const elems = document.querySelectorAll('*'),
  // and again using const to initialise the
  // 'backgrounds' Array; here we convert the iterable
  // NodeList returned from document.querySelectorAll()
  // into an Array, using the spread operator; and then
  // we use Array.prototype.filter() to filter that Array,
  // which returns a subset of the original Array as a new
  // Array:
  backgrounds = [...elems].filter(
    // as we don't require 'this', we're able to use an
    // Arrow function expression for brevity; here
    // current is reference to the current Node of the
    // Array of Nodes over which we're iterating:
    (current) => {
      // retrieving the background-image of the 'current'
      // element (as above):
      let background = window.getComputedStyle(current, null).getPropertyValue("background-image");

      // here we return Boolean true/false depending on
      // the assessment here; if the background variable
      // is not-equal to 'none' and has a length greater
      // than zero, we return true (which retains the
      // 'current' Node in the Array), otherwise we return
      // false (which causes the 'current' Node to be
      // discarded):
      return background != 'none' && background.length > 0;

    // next we use Array.prototype.map() to create a new
    // Array based on the contents of the existing Array:
    }).map(

    // Again using an Arrow function; as the contents
    // of the function aren't wrapped in braces we
    // use the implicit return, which returns the
    // retrieved background-image:
    (current) => window.getComputedStyle(current, null).backgroundImage
     );

console.log(backgrounds);

body {
  background: transparent url(http://davidrhysthomas.co.uk/linked/astrid_avatar.png) 50% 50% no-repeat;
}

ul {
  background: transparent url(http://davidrhysthomas.co.uk/img/dexter.png) 0 50% no-repeat;
  margin: 0 0 1em 0;
}

section p {
  background: transparent url(http://davidrhysthomas.co.uk/img/mandark.png) 100% 50% no-repeat;
  margin: 0 0 1em 0;
  width: 50%;
  margin-left: 45%;
}

<div id="elem1">
  <ul>
    <li style="background-image: url(http://www.davidrhysthomas.co.uk/img/v_thumbnail.png)">List element one</li>
    <li>List element two</li>
  </ul>
</div>
<section>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>

JS Fiddle 演示。

参考文献：

• Array.prototype.filter ()。
• Array.prototype.map()。
• Array.prototype.push()。
• 箭头函数。
• CSSStyleDeclaration.getPropertyValue()。
• document.getElementsByTagName()。
• document.querySelectorAll()。
• 传播 (... ) 语法。
• window.getCompulatedStyle()。

Answer 3

您可以尝试使用属性包含单词选择器：

$('*[style~="background-image"]')