How to change a website image with javascript?_问答_开发者

I'm working with my first Greasemonkey script.

And its for a website that have a logo, i want to change the image to a image i have created, and i wonder how i do this?

like use JavaScript to edit the current html document and replace the image.

Thanks for any help!

Edit: The image is inside a <img> tag, the image i want to change/replace is in this code:

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

Here is the javascript code i tryed and didnt work:

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

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

Knowing that you can use browser-specific javascript is a plus.

Use querySelectorAll.

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

~~Note: you're possibly selecting more than one element, so it's returning a nodelist rather than a single node, remember to select the first item in the list.~~

Better yet, use querySelector

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

Okay, here's a complete Greasemonkey script that swaps the logo image at Facebook under real-world conditions (meaning that the image may be in different places and you have to deal with the container and background images, etc.).

Note that this script looks for the image in two types of locations, and deals with the surrounding HTML, and CSS, if necessary.

Also note that it uses jQuery -- which is a godsend for writing GM scripts.
Finally: note that I avoid Facebook, and only know of the one logo location (plus the one that the OP reports. If there are new/different locations, deal with them in a similar manner.

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

find the image tag and replace the src attribute.

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

Pretty straightforward.

You can do this very simply with jQuery

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

you have to get the reference to your img element first, better use id instead of a class, since getElementsByClassName is not supported in IE until ie9:

with raw javascript (there are many ways of doing this. this is just the one):

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

with something like jQuery(js library) - you can easily select by class or by id or by tag etc:

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

How about using the DOM to find that specific attribute and change it to whatever?

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

querySelector：

return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null.

querySelectorAll：

return a NodeList containing all of the matching Element nodes within the node’s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList.

The　Use :

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

Sample :

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