Question

我有一个随机图像生成器，我把它放在div里面。有没有办法根据生成的图像更改div的背景颜色？（在回答我是JavaScript新手时请记住）

我尝试在JS中为生成器添加div标签，但HTML在脚本标记内部不起作用（我认为它不会，但你永远不知道）。

我也尝试过使用

document.body.style.backgroundColor =“在此处插入颜色”;

但它改变了页面的整个背景，我只想改变div的背景。

图像中的颜色不是我想要更改背景颜色的颜色。我想将背景颜色设置为最有可能完全不同的颜色。我唯一想知道的是如果有可能和如何这样做。

例如：网页加载x图像，所以我希望div的背景颜色变为紫色。当它加载y图像时，我希望bg颜色变为蓝色，依此类推。

这可能看起来像一个菜鸟问题，但如果可能，我该怎么做？我是否需要使用CSS或HTML，如果是，我会使用什么？

Answer 1

您可以使用Color Thief执行此操作，它可识别图像中的主色。

设置，下载/克隆源文件并确保在HTML中包含彩色小偷脚本非常简单

<script src="js/color-thief.min.js"></script>

然后在你的剧本中：

var colorThief = new ColorThief();
colorThief.getColor(sourceImage);

然后，您可以使用此值动态设置背景颜色

document.querySelector('boxx').style.backgroundColor = colorThief.getColor(sourceImage)