javascript - 无法循环获取平均图像颜色

Question

我想获得 <p> 中的所有三个图像背景颜色文本颜色但无法循环如何将所有图像循环并合并为一个， 我有三张图像，我只想循环这三张图像的颜色。

这里 - http://jsfiddle.net/xLF38/4346/

感谢@james 的精彩回答 Get average color of image via Javascript但只支持我想要的类明智的 id

Answer 1

只需按类获取目标元素，就像使用 image 类检索节点一样。

var r = document.getElementsByClassName('image');
var targets = document.getElementsByClassName('imagecolor');
var p ;
for (p = 0 ; p < r.length ; p++ ){
   var rgb = getAverageRGB(r[p]);
   targets[p].style.color = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
}

为了获得更好的性能，请避免在循环体中同时读取 DOM 和写入 DOM 操作(使用单独的循环)。 Demo

var r = document.getElementsByClassName('image');
var targets = document.getElementsByClassName('imagecolor');
var rgb = [];
for (p = 0 ; p < r.length ; p++ ){
   rgb.push(getAverageRGB(r[p]));
}
rgb.forEach((el,i) => {
   targets[i].style.color = 'rgb('+el.r+','+el.g+','+el.b+')';
})