JavaScript之显示和隐藏图片

知识进脑的肖老千啊

于 2021-04-21 20:30:52 发布

阅读量2.6k

点赞数 2

分类专栏： JS HTML 文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/m0_50481455/article/details/115976781

版权

HTML 同时被 2 个专栏收录

16 篇文章

订阅专栏

15 篇文章

订阅专栏

本文介绍了如何使用JavaScript来实现在网页中点击按钮显示和隐藏图片的功能，提供了两种实现方法，并展示了默认显示和隐藏后的效果。点击按钮即可切换图片的可见状态，是网页交互中的基础操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>