3

i wanna create a simple bookmarklet that hides all images from the current website i'm browsing.

javascript:body.getElementsByTagName("img").style.visibility="hidden";

that's not working? i wonder what i'm doing wrong?

thank you for your help!

Yahel
  • 37,023
  • 22
  • 103
  • 153
matt
  • 42,713
  • 103
  • 264
  • 397

2 Answers2

7

You need to iterate over the array-like object returned from document.getElementsByTagName, e.g.:

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].style.visibility = "hidden";
}

Edit:

The complete bookmarklet URI:

javascript:(function(){var imgs=document.getElementsByTagName("img");for(var i=0;i<imgs.length;i++)imgs[i].style.visibility="hidden"}());
harto
  • 89,823
  • 9
  • 47
  • 61
  • and how can i use that in one line for a bookmarklet? is that even possible to do? – matt Sep 02 '10 at 03:43
  • Sure, just replace newlines with spaces. – harto Sep 02 '10 at 03:55
  • javascript:var%20imgs=document.getElementsByTagName("img");for(var%20i=0;i – matt Sep 02 '10 at 03:58
  • doesn't work for me! clears the whole page and adds "hidden" to the body! – matt Sep 02 '10 at 03:59
  • thank you! but it doesn't really do the trick on every page! eg. on google if you browse for images it doesn't hide the images? any idea why? – matt Sep 02 '10 at 04:06
  • This will work on all images when the Bookmarklet is clicked. There is nothing stopping images loading after that (which wasn't specified in the scope of your question) though its possible to do that if you add a 'setInterval' to redo it every few seconds or to insert a CSS rule instead.. – donohoe Sep 02 '10 at 04:16
  • 1
    This method (and mine) won't hide images that weren't embedded using `` tags. These would primarily be CSS based images (`background-url`, etc), but it can also be ``, since images can be embedded using the embed tag. – Yahel Sep 02 '10 at 04:18
  • 1
    @mathiregister: At least in Chrome with the new image search, they are using canvas elements instead of images. If you call `getElementsByTagName` with "canvas" instead of "img" it should work. Of course, you would probably want to do both. Another case you might want to think about is CSS background images. – Matthew Crumley Sep 02 '10 at 04:21
0

my problem is this image-banners over the complete page (not interesting). so i was not able to read any text (text is interesting).

set height to 0 or in this example to 60px

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].style.height = "60px";
}

javascript:(function()%7Bvar%20imgs%20%3D%20document.getElementsByTagName(%22img%22)%3Bfor%20(var%20i%20%3D%200%3B%20i%20%3C%20imgs.length%3B%20i%2B%2B)%20%7Bimgs%5Bi%5D.style.height%20%3D%20%2260px%22%3B%7D%7D)()

SL5net
  • 2,282
  • 4
  • 28
  • 44