Javascript 以变量形式显示的图像的样式

我想显示一个图像（myimage1.jpg），并提供一个选项，您可以单击它并显示另一个图像（myimage2.jpg）

点击部分工作正常，现在我的问题是如何将一些样式应用于第二个图像（myimage2.jpg）

整个想法是使画廊，点击每一个图像，它放大，并有小说明

非常初级的代码；）

这就是我得到的

js

var onImg=“myimage1.jpg”；var offImg=“myimage2.jpg”；

html

---

您可以使用Javascript

启动图像更改代码后，使用javascript修改img标记的样式

例如：

document.getElementById("id-of-image").style.height = "100px";

---

画廊应该是什么样子？ 如果你只是在寻找一个灯箱或幻灯片，我建议你使用一个插件。其中许多是免费使用的，它们是由一些非初学者开发的。（还要注意您希望支持哪些浏览器，因为有些库只适用于现代浏览器） 有数百个这样的插件。 只需谷歌搜索“幻灯片”或“灯箱”：

但是，如果你单独构建这个小功能，我就不知道这个库应该是什么样子。 我已经为你创建了两个小画廊的例子，在飞行中

他们中有人有类似的行为吗

---

如果你也能做一个jsfiddle，那也太好了。：）

另外，所有的建议都很好，onclick=add a class/或take a away一个图像（myimage1.jpg）有一个id。第二个图像没有显示在html或css中，它只通过单击显示。所以我不知道如何设置var offImg=“myimage2.jpg”的样式；是的，但是当src更改时，映像的id不会更改<代码>var onImg=“myimage1.jpg”；var offImg=“myimage2.jpg”；document.getElementById（“图像的id”）.style.height=“100px”谢谢男人们的回复，但我还是想不出来：D，你能给我一些选择吗？

<img src="myimage1.jpg" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);"/>

document.getElementById("id-of-image").style.height = "100px";