背景

单击图片实现更换图片。本例中代码实现单击图片后交替显示两张图片。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>灯泡</title>
</head>
<body>
<img id = "pic" src = "on.png"> <!--此处应注意图片位置，确保图片在当前项目中的目录中。否则需要指定文件的相对路径或者绝对路径以指定图片-->

<script>
    var img = document.getElementById("pic");
    var flag = true;
    img.onclick = function (){
        if (flag){
            img.src = "off.png";
            flag = false;
        }else{
            img.src = "on.png";
            flag = true;
        }
    }
</script>
</body>
</html>
版权声明：本文为weixin_43203591原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_43203591/article/details/119650004