javascriptjs匹配和图片的相互替换

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

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

我们先看看javascriptjs/js代码和效果图:

代码如下：

图1

按F12预览效果图如下：

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

图2

图3

下面我们来讲解下这个javascriptjs/js：

javascriptjs/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()" />

在后面的文章中会继续的给大家讲解其它的javascript/JS相关的功能和效果！

希望大家多多给意见！

关注公众号（月影WEB），了解更多的前后端知识；

欢迎大家关注互相交流学习；