通过 JavaScript 将更改应用于所有 <img> [重复]答案

【问题标题】：Apply changes to all <img> by JavaScript [duplicate]通过 JavaScript 将更改应用于所有 <img> [重复]
【发布时间】：2017-03-15 13:02:09
【问题描述】：

我想通过按下按钮将filter 强制添加到页面中的所有img 标记中。图片的数量在不同的页面中有所不同。我走了这么远：

function ccbfunction(wt) {
    var w = document.getElementsByTagName("img");
    var z;
    if (wt == 0) {
        z = "#e0e0e0";
    } else {
        z = "#fff";
    };
    w[0].style.filter = "brightness(80%)";
}

现在它只处理第一张图片，我不知道如何选择所有<img>s。图片的数量不是恒定的，所以我不使用for 循环。

【问题讨论】：

使用 jQuery 是一种选择吗？那么你的生活会变得如此简单......
@Exception_al 如果我别无选择。
@Exception_al 是的，你的工作正常，谢谢。

标签： javascript

【解决方案1】：

我建议您使用document.getElementsByTagName("img") 将所有img 元素捕获到array-like 节点列表中。

然后使用Array#from 将其转换为一个数组，并使用Array#forEach 简单地对其进行迭代，并将新的style 应用于每个元素。

function ccbfunction(wt) {
  var w = document.getElementsByTagName("img");
  var z;

  if (wt == 0) {
    z = "#e0e0e0";
  } else {
    z = "#fff";
  };
  Array.from(w).forEach(v => v.style.filter = "brightness(40%)");
}

ccbfunction();

<img src='http://placehold.it/150x150'>
<img src='http://placehold.it/250x150'>
<img src='http://placehold.it/250x150'>
<img src='http://placehold.it/200x150'>
<img src='http://placehold.it/150x200'>

【讨论】：

【解决方案2】：

你可以试试这个

for(var i=0;i<w.length;i++){
  w[i].style.filter="brightness(80%)";
}

我想这应该会有所帮助；

【讨论】：

【解决方案3】：

您可以遍历对象，例如：

var w= document.getElementsByTagName("img");
for (var i = 0; i < w.length; i++) {
    // Perform activity on list[i]
    w[i].style.filter="brightness(80%)";
}

【讨论】：

【解决方案4】：

你可以使用 forEach 循环：

w.forEach(function(image) {

 image.style.filter = "brightness(80%)";

});

它在每个实例中循环，因此页面上有多少个 img 标签并不重要

【讨论】：

【解决方案5】：

document.getElementsByTagName 返回一个 nodeList 一个类似对象的数组，但是如果你想遍历 nodeList，你可以使用一种解决方法来使用 nodeList 上的 forEach 等数组方法。

使用Array.prototype.forEach.call 可以在nodeList 上使用Array 方法。

试试下面的代码：

function ccbfunction(wt) {
    var w = document.getElementsByTagName("img");
    var z;
    if (wt == 0) {
        z = "#e0e0e0";
    } else {
        z = "#fff";
    };
    Array.prototype.forEach.call(w, function(node, index) {
        node.style.filter = "brightness(80%)";
    })
    w[0].style.filter = "brightness(80%)";
}

【讨论】：

【解决方案6】：

你使用下面的逻辑。

   $('img').each(function(){
      //Write your logic here
    });

【讨论】：

根据 OP，使用jQuery 不是一个选择！