Question

我想以<p>文本颜色获得所有三种图像背景色，但无法循环显示如何将所有图像循环成一张，我有三个图像，我只想循环显示这三个图像的颜色。

感谢@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+')';
})

Answer 2

只需遍历所有图像并建立平均值：

.columns {
  display: table;
}
.leftNav {
   display: table-cell;
   width: 200px;
}
.rightPara {
   display: table-cell;
}

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

2 个答案: