如何使用JavaScript隐藏所有图片？

Question

我正在使用Google Chrome扩展程序将JavaScript代码注入到一个网站中，用于个人使用...我想在页面加载之前隐藏所有的图片...我已经让脚本在任何东西加载之前运行，但似乎无法得到正确的代码来隐藏图片数组...类似于：

function beforeload(){
  document.getElementsByTagName('img')[0].style.display = "none"
}

基本上，我希望所有的图像标签都添加style="display:none"属性。我该如何做到这一点？

- David

Answer 1

您需要对它们进行循环。

var images = document.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
    images[i].style.display = "none";
}

- Amr Elgarhy

---

你到底为什么要在每次迭代中运行 getElementsByTagName？我猜你的意思是在循环体中执行 images[i]... ... - Sean Kinsey

@Sean Kinsey：感谢您发现了这个问题，我在粘贴代码之前忘记更改它了。 - Amr Elgarhy

Answer 2

Amr已经用JavaScript找到了解决方法。如果您在页面中添加jQuery，只需要一行代码即可实现。

$('img').hide();

- Cyril Gupta

Answer 3

以下代码仅隐藏所有图像元素的图像。

let images = document.getElementsByTagName("img");
    let images_length = images.length;
    for (let i = 0; i < images_length; i++) {
      images[i].style.setProperty("display", "none", "important");
    }

但如果使用CSS显示图像怎么办？ 所有元素的解决方案

 let images = document.getElementsByTagName("img");
    let images_length = images.length;
    for (let i = 0; i < images_length; i++) {
      images[i].style.setProperty("display", "none", "important");
    }

    /** now also hide images which are implemented in css */
    let all_elements = document.querySelectorAll("*");
    for(let i = 0 ; i < all_elements.length ; i++){
      all_elements[i].style.setProperty("background-image","unset","important");
    }

.image {
  width : 100px;
  height : 100px;
  background-image : url(https://image.shutterstock.com/image-photo/aerial-view-main-faisal-mosque-600w-1242735640.jpg);
}

<img src="https://image.shutterstock.com/image-photo/aerial-view-main-faisal-mosque-600w-1242735640.jpg" width="100" height="100">
<div class="image"></div>
<div> To show images plz comment/remove js </div>

- Ihtisham Hussain

Answer 4

看一下这个： http://ncthakur.itgo.com/js09.htm

它不完全是你要找的，但你可以使用其中的一部分。

我在谷歌上花了七秒钟找到它;)

- user724069