javascript - 使用 Javascript 获取 DOM 中的所有图像

Question

我在 DOM 中有大量图像，其中图像 href 是在 CSS 中设置的。

任何人都知道一个很好的方法来列出所有这些很像

document.images

这会拉出一组图像标签。

我需要做类似的事情，但提取所有可能位于 CSS 类中的图像 url

我需要使用 JavaScript 对某些图像进行替换

Answer 1

您可以:

1. 遍历 document.styleSheets 中的样式表对象
2. 对于每个样式表( CSSStyleSheet )，遍历其 cssRules (旧 IE 使用 rules 而不是 cssRules )
3. 对于每个具有 CSSRule 的规则( style )属性，遍历该样式对象的属性，并在那些字符串和具有目标图像的属性中进行替换。

一秒钟后用你的替换我的 Gravatar 的示例:

setTimeout(function() {
  var rexOldImage = /ca3e484c121268e4c8302616b2395eb9/g;
  var newImage = "fe10f9831fc5d88da31dab172740a1ad";
  var slice = Array.prototype.slice;
  slice.call(document.styleSheets).forEach(function(styleSheet) {
    slice.call(styleSheet.cssRules || styleSheet.rules).forEach(function(rule) {
      var name, style;
      if (rule.style) { // Only CSSStyleRules have a style prop
        for (name in rule.style) {
          style = rule.style[name];
          if (typeof style === "string" && rexOldImage.test(style)) {
            rule.style[name] = style.replace(rexOldImage, newImage);
          }
        }
      }
    });
  });
}, 1000);

.some-class {
  background-image: url(https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG);
  width: 32px;
  height: 32px;
}

<div class="some-class"></div>

如果使用slice不熟悉，请参阅 this answer 的“类数组对象”部分.