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 相关文章推荐
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
JavaScript代码实现微博批量取消关注功能
Feb 05 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实现的链式队列结构示例
2017/09/15 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
java script编程起步(第三课)
2007/01/10 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
js实现密码强度检验
2017/01/15 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python之eval()函数危险性浅析
2014/07/03 Python
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
新电JAVA笔试题目
2014/08/31 面试题
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
学校端午节活动总结
2015/02/11 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL