Question

我正在使用我的第一个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";

Answer 1

知道您可以使用特定于浏览器的javascript。

使用querySelectorAll。

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

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

更好的是，使用querySelector

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

Answer 2

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

Answer 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%'} );

Answer 4

找到图像标记并替换src属性。

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

非常简单。

Answer 5

您可以使用jQuery

非常简单地完成此操作

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

Answer 6

你必须首先获得对img元素的引用，更好地使用id而不是类，因为IE中不支持getElementsByClassName，直到ie9：

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

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

使用类似jQuery（js库）的东西 - 你可以通过类或id或标签等轻松选择：

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

Answer 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>

Answer 8

<强> querySelector：

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

<强> querySelectorAll：

按文档顺序返回包含节点子树中所有匹配的Element节点的NodeList。如果没有此类节点，则该方法必须返回空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>

如何用javascript更改网站图像？

8 个答案: