JavaScript实现显示和隐藏图片


Posted in Javascript onApril 29, 2021

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>

有两种实现方法,实现情况如下:

JavaScript实现显示和隐藏图片

这是默认显示界面,点击隐藏后,会这样:

JavaScript实现显示和隐藏图片

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
移动节点的jquery代码
Jan 13 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
JS Canvas接口和动画效果大全
Apr 29 #Javascript
JS ES6异步解决方案
Apr 29 #Javascript
聊聊JS ES6中的解构
Apr 29 #Javascript
详解TypeScript中的类型保护
Apr 29 #Javascript
7个你应该知道的JS原生错误类型
Apr 29 #Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
如何使用JavaScript策略模式校验表单
Apr 29 #Javascript
You might like
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
js调用css属性写法
2013/09/21 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
django框架自定义用户表操作示例
2018/08/07 Python
用Python shell简化开发
2018/08/08 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
四年大学生活的个人自我评价
2013/12/11 职场文书
倡议书格式
2014/04/14 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
小学母亲节活动总结
2015/02/10 职场文书
品德与社会教学反思
2016/02/24 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
灵能百分百第三季什么时候来?
2022/03/15 日漫