javascript/js匹配和图片的相互替换

我们先看看JS代码和效果图

代码如下：

 

按F12预览效果图如下：

点击“灯泡”，“灯泡”的关闭和打开会进行切换，从而达到图片切换的目的！

               

 

下面我们来讲解下这个JS：

JS部分：

<script>
function yue()//申明一个JS方法叫yue()
{
    var x=document.getElementById("yueying");//获取文档中id为yueying的标签
    if(x.src.match("images/off.png"))//x的图片的路径和“images/off.png”进行匹配，如果yueying的原路径也是“images/off.png”，匹配成功，那么就执行if语句内的函数，将x的路径改为x.src="images/on.png",从而替换掉了以前的路径
    {
        x.src="images/on.png";
    }
    else//如果if条件没有匹配成功，那么就执行else里面的函数！，同理！从而达到了图片可以交换替换的效果！
    {
        x.src="images/off.png";
    }
}
</script>

 

代码部分：

<h3><a href="http://www.yydpt.com" title="月影web" target="_block">月影web</a></h3>
<img src="images/off.png" id="yueying" onclick="yue()" />

关注微信公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；