Javascript 我如何制作一个像你一样的网页，选择颜色和项目'；s的颜色是否更改为选定的颜色？

我其实不知道这种情况的具体名称（如果有），我的问题是这个； 我想建立一个网页像在购物网站或官方汽车公司网站的网页

例如，您想购买一件t恤衫，当您单击颜色时，t恤衫的图像会像所选颜色一样发生变化，或者在汽车公司官方网站上，汽车有颜色选项，您可以选择网站显示汽车颜色的颜色

我做了类似的事情，但4种颜色选项，我改变了它的颜色photoshop它正在工作，但我有4种不同的图像，我需要这样做，像100种不同的颜色。但是我不能制作100张不同的图片，因为这有什么办法可以解决这个问题吗

我希望，我能解释我自己

---

谢谢大家!

如果我正确理解了这个问题，您会问是否有一种方法可以通过编程方式对图像进行Photoshop。我试过了，我想我有办法了

首先，你应该拍下你的照片。然后使用photoshop或任何其他软件，使需要改变颜色的对象透明。然后查看下面的代码并相应地进行调整

JS:

HTML:

蓝色
红色
绿色
//插入图片的宽度和高度
//Picture1是带有对象的图片

单击“红色”按钮时，div的背景颜色将变为红色，并且由于您使对象的背景透明，因此对象应显示为红色

---

如果您不了解情况，请询问，我需要支持！谢谢你的支持。我很清楚你的意思。您正在另一张图片上添加图片谢谢。如果您觉得有帮助@AliİmranKorkmaz，请您更新我的答案好吗？我已经更新了，它说15岁以下的投票记录了，但不会改变任何状态等。哦，好的，谢谢！！

function blue() {
    document.getElementById("div").style.backgroundColor = "blue";
}
function red() {
    document.getElementById("div").style.backgroundColor = "red";
}
function green() {
    document.getElementById("div").style.backgroundColor = "green";
}

<button onclick="blue()">Blue</button>
<button onclick="red()">Red</button>
<button onclick="green()">Green</button>

<div id="div" style="z-index: 1; background-color: blue; width:550; height:718;"> //Insert the width and height of the picture
<img src="Picture1.png" style="z-index:2;"/> //Picture1 is the picture with the object
</div>