通过onclick()函数更改图像
P粉242535777
2023-08-18 08:53:28
<p>我想在点击对象时将一张图片更换为另一张图片。代码按照以下顺序堆叠：</p>
<pre class="brush:php;toolbar:false;"><li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li></pre>
<p>我希望的是，当我点击<code><li></code>时，将图片更换为彩色版本的图片，即另一张图片。现在，我知道我可以使用JQuery/JS来实现。但是我不想为了实现这么简单的功能而添加大量的JS代码。</p>
<p>有没有更简单的方法来实现？像伪选择器<code>.active</code>类这样的方法？</p>
<p>我想不出来。</p>
要使用JavaScript更改图像的onclick事件，您需要具有具有id的图像：
<p> <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"/> </p>然后，当单击图像时，您可以调用JavaScript函数：
function changeImage() { if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){ document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png"; } else { document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png"; } }此代码将在当前img.src设置为minimize.png时将图像设置为maximize.png，反之亦然。 有关更多详细信息，请访问： 使用JavaScript更改图像的onclick事件链接