JavaScript实现显示和隐藏图片-偶像资源网

JavaScript之显示和隐藏图片，供大家参考，具体内容如下

点击按钮可以显示和隐藏图片（默认显示），附上代码：

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <title>显示和隐藏图片</title>
</head>
<body>
    <button id=\"btn\">隐藏</button>
    <br>
    <img src=\"img/image01.jfif\" id=\"newGirlFriend\">
    <script type=\"text/javascript\">
        // 1.获取事件源
        var obtn = document.getElementById(\"btn\");
        var newImg = document.getElementsByTagName(\"img\")[0];
        // var isShow = true; //方法2

        // 2.绑定事件
        obtn.onclick = function (){
            // if (isShow) { //方法2
            if (obtn.innerHTML === \'隐藏\') {
                // 3.事件驱动程序
                newImg.style.display = \'none\';
                obtn.innerHTML = \"显示\";  //
                // isShow = false; //方法2
            }else {
                newImg.style.display = \'block\';
                obtn.innerHTML = \"隐藏\";
                // isShow = true; //方法2
            }
        }

    </script>
</body>
</html>

有两种实现方法，实现情况如下：

这是默认显示界面，点击隐藏后，会这样：

简单的显示和隐藏图片功能就实现啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

JavaScript实现显示和隐藏图片

请登录后发表评论