Question

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

任何人都知道一个很好的方法来提取所有这些的列表，就像

一样

document.images

这会拉出一系列图像标记。

我需要做类似的事情，但是取出可能位于CSS Classses

中的所有图片网址

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

Answer 1

你可以：

遍历document.styleSheets
对于每个样式表（CSSStyleSheet），循环显示其cssRules（旧IE使用rules而不是cssRules）
对于具有style属性的每个规则（CSSRule），循环遍历该样式对象的属性，以及那些是字符串并具有目标图像的规则，进行替换

一秒钟后用你的Gravatar代替示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果不熟悉slice的使用，请参阅＆＃34;类似数组的对象＆＃34; this answer的一部分。

Answer 2

您可以使用get调用ajax在javascript中加载css文件，然后使用正则表达式匹配来查找css中的url。您可能希望重复删除重复，但这也是可能的。

如果您需要帮助代码，请告诉我。

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

2 个答案: