JavaScript：点击图片后更换图片

背景单击图片实现更换图片。本例中代码实现单击图片后交替显示两张图片。实现代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>灯泡</title></head><body><img id = "pic" src =

郎家岭伯爵

7172人浏览 · 2021-08-12 18:03:43

郎家岭伯爵 · 2021-08-12 18:03:43 发布

背景

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

实现

<!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>