Finden Sie einen Bildnamen und ersetzen Sie ihn durch eine andere Quelle - Javascript, Jquery, HTML, CSS, Google-Chrome-Erweiterung

Ich schreibe eine Chrome-Erweiterung, um alle Vorkommen eines bestimmten Bildsatzes (ich habe die Bildnamen) durch ein anderes Bild (src) zu ersetzen.

Ich muss alle Vorkommen eines bestimmten Bildnamens auf einer Website finden und den Quellcode des Bildes durch ein benutzerdefiniertes Bild ersetzen.

Ich kann den Bildnamen in finden <img> Tags mit dem folgenden Snippet

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

var img = $(key);

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

Problem tritt auf, wenn das Bild als eingestellt ist background-image oder als CSS-Eigenschaft. Ist es möglich das zu scannen? DOM mit jQuery (rekursiv in allen angehängten Stylesheets) und alle Vorkommen des Bildes durch die Ziel-URL ersetzen? Wenn es möglich ist, kann mich jemand in die richtige Richtung weisen?

Antworten:

Sie können alle Inline-Hintergrundbilder folgendermaßen ändern:

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

Das Ändern von Hintergrundbildern im CSS ist schwieriger.

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

Ich denke das könnte so sein, hoffe das wird dir helfen

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

Auf der aktuellen Seite getestet, funktioniert einwandfrei.

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

Sie können jedes manuell durchgehen, um den Wert zu überprüfen:

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

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

// check if "b" has the image name

})