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

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

javascript

如何使用javascript更改网站图像？,javascript,greasemonkey,Javascript,Greasemonkey,我正在写我的第一个Greasemonkey脚本对于一个有logo的网站，我想把图片改成我自己创建的图片，我想知道我是怎么做到的例如，使用JavaScript编辑当前html文档并替换图像谢谢你的帮助编辑：图像位于标记内，我要更改/替换的图像位于以下代码中：找到图像标记并替换src属性 var myImage = document.querySelector('.fb_logo img'); myImage.src = "http://happylifeinnyc.com/wp-cont

我正在写我的第一个Greasemonkey脚本

对于一个有logo的网站，我想把图片改成我自己创建的图片，我想知道我是怎么做到的

例如，使用JavaScript编辑当前html文档并替换图像

谢谢你的帮助

编辑：图像位于

标记内，我要更改/替换的图像位于以下代码中：

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

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

非常简单。

知道可以使用特定于浏览器的javascript是一个加号

使用

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

更好的是，使用

var logos=document.getElementsByClassName（“fb_logo”）；
对于（变量i=0；i

使用jQuery可以非常简单地实现这一点

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

您必须首先获得对img元素的引用，最好使用id而不是类，因为在ie9之前IE中不支持getElementsByClassName：

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

使用类似jQuery（js库）的工具，您可以轻松地按类、id或标记等进行选择：

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

使用查找该特定属性并将其更改为任意值如何

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


var yerImg=document.getElementsByTagName（“img”）；
yerImg[0]。setAttribute（“src”http://goo.gl/JP8bQ");

好的，这里有一个完整的Greasemonkey脚本，它在现实世界中交换Facebook上的徽标图像（这意味着图像可能位于不同的位置，您必须处理容器和背景图像等）

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

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

/==UserScript==
//@name\u Facebook徽标交换
//@包括http://www.facebook.com/*
//@包括https://www.facebook.com/*
//@需要http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
//==/UserScript==
/*---在以下位置找到FB徽标：
“h1#pageLogo a”作为背景图像。
据报道它也出现在：“img.fb_logo.img”
*/
var desiredImage=”http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";
//---直接图像交换：
$（'img.fb_logo'）.attr（'src'，desiredImage）；
/*---将链接的内容（以徽标为背景）替换为普通图像。
由于此图像是透明的，请清除旧的BG图像。
还将新img约束到其容器。
*/
$（'#pageLogo a'）.css（'background-image'，'none'）
.append（'查询选择器：
返回节点子树中的第一个匹配元素节点。如果没有此类节点，则该方法必须返回null
查询选择全部：
按文档顺序返回包含节点子树中所有匹配元素节点的节点列表。如果没有此类节点，则该方法必须返回空节点列表
　使用：
// ==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%'} );

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


var myImageList=document.querySelectorAll（'.fb_logo'）；
myImageList[0]。src=”http://happylifeinnyc.com/wp-content/uploads/2011/07/facebook_love_heart.png";
这个徽标是一个元素还是另一个元素的背景？不要创建新问题，只需编辑旧问题。如果图像没有id，而是有一个类怎么办？@harithski:你没有。哎呀，我忘了。我最近用了太多Xpath。忽略我的答案。不要使用document.querySelectorAll（'.yourClass'）[0]；
，为什么不使用文档。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，我我明白你写的，我只是在澄清我的具体情况。幸运的是我不需要支持
        $('.fb_logo').attr('src','newimage.jpg');

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

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

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

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

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>