JS图片显示与隐藏案例

最新推荐文章于 2023-06-24 11:25:23 发布

梦樊哥哥

最新推荐文章于 2023-06-24 11:25:23 发布

阅读量3.1k

点赞数 1

分类专栏： JS详解（从零到一）文章标签： javascript

本文链接：https://blog.csdn.net/mengfanshaoxia/article/details/122949228

版权

JS详解（从零到一）专栏收录该内容

25 篇文章 5 订阅

订阅专栏

一、案例需求

点击按钮后图片隐藏，同时按钮的文字变为显示，再次点击按钮图会显示，同时按钮的文

字变为隐藏。

二、案例分析

1、事件源：按钮（button）

2、事件类型：点击（onclick）

3、事件处理程序：

（1）文字内容改变用：innerText

（2）图片是否显示用：display

三、代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>显示和隐藏图片</title>
    <style>
        #new {
            width: 200px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <button id="btn">隐藏</button><br>
    <img src="images/img01.jpg" id="new">

    <script>
        // 1. 获取元素
        var btn = document.querySelector('#btn');
        var img = document.querySelector('#new');

        var index = 1;
        // 2. 添加事件
        btn.onclick = function() {
            //法一：
            if (index++ % 2 === 1) {
                img.style.display = 'none';
                this.innerText = '显示'
            } else {
                img.style.display = 'block';
                this.innerText = '隐藏';
            }

            // 法二
            // if (this.innerText === '隐藏') {
            //     img.style.display = 'none';
            //     this.innerText = '显示'
            // } else {
            //     img.style.display = 'block';
            //     this.innerText = '隐藏';
            // }
        };
    </script>
</body>

</html>

梦樊哥哥

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JS图片显示与隐藏案例

一、案例需求点击按钮后图片隐藏，同时按钮的文字变为显示，再次点击按钮图会显示，同时按钮的文字变为隐藏。二、案例分析1、事件源：按钮（button）2、事件类型：点击（onclick）3、事件处理程序：（1）文字内容改变用：innerText（2）图片是否显示用：display三、代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
复制链接

扫一扫