Question

我正在编写一个chrome扩展来替换某些图像集的所有出现（我有图像名称）并将其替换为另一个图像（src）

我需要在网站中找到某个图像名称的所有匹配项，并用自定义图像替换图像的src。

我可以使用以下代码段在<img>代码中找到图片名称

var key = 'img[src*="' + src + '"]';

var img = $(key);

img.attr('src', 'http://blah.blah/a.png);

将图像设置为background-image或css属性时出现问题。是否可以使用DOM（在所有附加的样式表中递归）扫描jQuery并用目标网址替换所有出现的图像？如果有可能，有人能指出我正确的方向吗？

Answer 1

我认为这可能是这样，希望这会对你有所帮助

$(document).ready(function(){
    $("*").each(function(){
        var bgImge = $(this).css('background-image');
        if(bgImge.indexOf('yourImageName') > -1)
        {
          $(this).css('background-image', 'newImage');
        }
    }); 
});

Answer 2

您可以手动浏览每个以检查其值：

$("*").each(function() {

   var b = $(this).css("background-image") ||  $(this).css("background");

   // check if 'b' has the image name

})

Answer 3

您可以使用以下方法更改所有内嵌背景图像：

$("[style*=background-image]").css('background-image', function(i, oldimg) {
    return oldimg.indexOf(src) == -1 ? oldimg : 'url(http://blah.blah/a.png)';
});

更改CSS中的背景图像比较棘手。

var ss = document.styleSheets;
for (var i = 0; i < ss.length; i++) {
    var rules = ss[i].cssRules;
    for (var j = 0; j < rules.length; j++) {
        var rule = rules[i];
        if (rule && rule.type == CSSRule.STYLE_RULE && rule.style.backgroundImage.indexOf(src) != -1) {
            rule.style.backgroundImage = 'url(http://blah.blah/a.png)';
        }
    }
}

Answer 4

在当前页面上测试，工作正常。

var src = 'http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=a7723f5f7e59';
$('*').each(function(){
  if( $(this).css('background-image').indexOf(src)!=-1){
   console.log('Found',this);
   $(this).css('background-image','url(http://blah.blah/a.png)');
  }
});

找到图像名称并将其替换为其他来源

4 个答案: