如何使用 javascript 更改网站图像？答案

【问题标题】：How to change a website image with javascript?如何使用 javascript 更改网站图像？
【发布时间】：2011-10-14 09:38:53
【问题描述】：

我正在使用我的第一个 Greasemonkey 脚本。

对于一个有徽标的网站，我想将图像更改为我创建的图像，我想知道我是如何做到的？

喜欢用JavaScript来编辑当前的html文档并替换图片。

感谢您的帮助！

编辑： 图片在<img>标签内，我要更改/替换的图片在此代码中：

<img class="fb_logo img" src="https://s-static.ak.facebook.com/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" alt="Facebook logo" width="170" height="36">

这是我尝试但没有工作的javascript代码：

var myImage = document.querySelector('.fb_logo img');
myImage.src = "http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";

【问题讨论】：

这个标志是一个元素还是另一个元素的背景？
不要创建新问题，只需编辑旧问题即可。

标签： javascript greasemonkey

【解决方案1】：

var logos = document.getElementsByClassName("fb_logo");

for( var i = 0; i < logos.length; i++ )
{
    // true for all img tags with the fb_logo class name
    if( logos[ i ].tagName == "IMG" )
    {
        logos[ i ].src = "http://www.computerweekly.com/blogs/it-downtime-blog/lolcat-tan.jpg"
    }
}

【讨论】：

【解决方案2】：

知道您可以使用特定于浏览器的 javascript 是一个加分项。

使用querySelectorAll。

var img = document.querySelectorAll('.yourClass')[0];

~~注意：您可能选择了多个元素，因此它返回的是节点列表而不是单个节点，请记住选择列表中的第一项。~~

更好的是，使用querySelector

var img = document.querySelector('.yourClass');

【讨论】：

与其使用document.querySelectorAll('.yourClass')[0];，不如使用document.querySelector('.yourClass');？ ;)
Chrome：1，Firefox (Gecko)：3.5 (1.9.1)，Internet Explorer：8，Opera：10，Safari (WebKit)：3.2 (525.3)。对我来说似乎很兼容，除非你打算支持
@Brock Adams，因为我不知道那种方法。我通常避免使用querySelectorAll 和类似功能，因为它们不兼容跨浏览器。通常我会导入一个库并在库中工作。
@Hello71，我通常必须支持IE7&8。
@Hello71，我明白你写的，我只是在澄清我的特殊情况。幸运的是我不必支持

【解决方案3】：

好的，这是一个完整的 Greasemonkey 脚本，它可以在真实条件下在 Facebook 上交换徽标图像（这意味着图像可能位于不同的位置，您必须处理容器和背景图像等）。

请注意，此脚本在两种类型的位置查找图像，并在必要时处理周围的 HTML 和 CSS。

还要注意它使用 jQuery——这是编写 GM 脚本的天赐之物。
最后：请注意，我避免使用 Facebook，并且只知道一个徽标位置（加上 OP 报告的那个位置。如果有新的/不同的位置，请以类似的方式处理它们。

// ==UserScript==
// @name            _Facebook Logo Swap
// @include         http://www.facebook.com/*
// @include         https://www.facebook.com/*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==

/*--- Found FB logo at:
    "h1#pageLogo a" as a backgound image.

    It's reportedly also at: "img.fb_logo.img"
*/
var desiredImage    = "http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";

//--- Straight image swap:
$('img.fb_logo').attr ('src', desiredImage);


/*--- Replace the link's -- with the logo as a background -- contents with just a plain image.
    Since this image is transparent, clear the old BG image.
    Also constrain the new img to its container.
*/
$('#pageLogo a').css ('background-image', 'none')
                .append ('<img>').find ('img')  .attr ('src', desiredImage)
                                                .css ( {width: '100%', height: '100%'} );

【讨论】：

【解决方案4】：

找到图片标签并替换src属性。

var myImage = document.getElementById(idOfImageYouNeedToChange);
myImage.src = "your_image";

非常简单。

【讨论】：

图片没有id怎么办？但它有一个类？
@harithski：你没有。 document.getElementsByClassName("class")
糟糕，我忘记了。我最近一直在使用太多的 Xpath。忽略我的回答。

【解决方案5】：

您可以使用 jQuery 非常简单地做到这一点

        $('.fb_logo').attr('src','newimage.jpg');

【讨论】：

【解决方案6】：

您必须首先获取对您的 img 元素的引用，最好使用 id 而不是类，因为 IE 直到 ie9 才支持 getElementsByClassName：

使用原始 javascript（有很多方法可以做到这一点。这只是其中一种）：

var theImg = document.getElementById('imageId');
theImg.src = 'someNewPath'

使用 jQuery(js library) 之类的东西 - 您可以轻松地按类或 id 或标签等进行选择：

$('.yourPicClass').attr('src', 'someNewPath')

【讨论】：

【解决方案7】：

使用DOM 来查找该特定属性并将其更改为任何内容怎么样？

<html>
    <body>
        <img class="fb_logo img" src="https://s-static.ak.facebook.com/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" alt="Facebook logo">
    </body>
    <script type="text/javascript">
        var yerImg = document.getElementsByTagName("img");
        yerImg[0].setAttribute("src", "http://goo.gl/JP8bQ");
    </script>
</html>

【讨论】：

【解决方案8】：

查询选择器：

返回节点子树中第一个匹配的 Element 节点。如果没有这样的节点，该方法必须返回null。

querySelectorAll：

返回一个 NodeList，其中包含节点子树中所有匹配的 Element 节点，按文档顺序排列。如果没有这样的节点，该方法必须返回一个空的 NodeList。

用途：

var element = baseElement.querySelector(selectors);
var elementList = baseElement.querySelectorAll(selectors);

示例：

<html>
<body>
    <img class="fb_logo" src="https://s-static.ak.facebook.com/rsrc.php/v1/yp/r/kk8dc2UJYJ4.png" alt="Facebook logo">
</body>
<script type="text/javascript">
    var myImageList = document.querySelectorAll('.fb_logo');
    myImageList[0].src = "http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";
</script>
</html>

【讨论】：