广告
返回顶部
首页 > 资讯 > 精选 >JavaScript实现显示和隐藏图片的方法
  • 780
分享到

JavaScript实现显示和隐藏图片的方法

2023-06-14 22:06:15 780人浏览 八月长安
摘要

这篇文章给大家分享的是有关javascript实现显示和隐藏图片的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaSc

这篇文章给大家分享的是有关javascript实现显示和隐藏图片的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

JavaScript是什么

JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript是被广泛用于客户端的脚本语言,最早是在html网页上使用,用来给HTML网页增加动态功能。

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实现显示和隐藏图片的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: JavaScript实现显示和隐藏图片的方法

本文链接: https://www.lsjlt.com/news/275509.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript实现显示和隐藏图片的方法
    这篇文章给大家分享的是有关JavaScript实现显示和隐藏图片的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaSc...
    99+
    2023-06-14
  • JavaScript实现显示和隐藏图片
    JavaScript之显示和隐藏图片,供大家参考,具体内容如下 点击按钮可以显示和隐藏图片(默认显示),附上代码: <!DOCTYPE html> <html ...
    99+
    2022-11-12
  • javascript显示和隐藏div的方法
    这篇文章给大家分享的是有关javascript显示和隐藏div的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。javascript显示隐藏div的方法:首先新建文件,并创建button按钮;然后创建隐藏的di...
    99+
    2023-06-14
  • css实现显示和隐藏的方法
    今天小编给大家分享的是css实现显示和隐藏的方法,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。css是什么意思css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设...
    99+
    2023-06-14
  • javascript显示隐藏div的方法
    这篇文章主要介绍javascript显示隐藏div的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!方法:1、利用display属性,语法“div对象.style.display="none|block&...
    99+
    2023-06-14
  • css实现div显示隐藏的方法
    小编给大家分享一下css实现div显示隐藏的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!css实现div显示隐藏的方法:1、使用CSS的display属性来隐藏或显示div;2、使用CSS的visibility属性来...
    99+
    2023-06-14
  • js调用图片隐藏&显示实现代码
    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>...
    99+
    2022-11-15
    js调用图片 隐藏显示
  • JavaScript实现下拉菜单的显示隐藏
    本文实例为大家分享了JavaScript实现下拉菜单显示隐藏的具体代码,供大家参考,具体内容如下 有时需要这种页面效果: 鼠标移动到元素上面时,实现下拉菜单 鼠标移开元素后,下拉菜单...
    99+
    2022-11-12
  • JavaScript实现显示隐藏表单文字
    本文实例为大家分享了JavaScript实现显示隐藏表单文字的具体代码,供大家参考,具体内容如下 实现思路 运用 onfocus、onblur 事件 onfocus- - -获取焦点...
    99+
    2022-11-12
  • Android中实现EditText密码显示隐藏的方法
    在Google发布了support:design:23+以后我们发现有这么一个东西TextInputLayout,先看下效果图: <android.support.d...
    99+
    2022-06-06
    edittext 方法 Android
  • winxp和win7显示隐藏文件的方法
    一、XP系统隐藏文件恢复方法: 1、点开 我的电脑 2 、在最上排的一排按钮中 有工具 这个按钮 点开 3、 点开 文件夹选项 4、 点最上一排按钮 查看 5 、把 隐藏受保护的操作系统文件勾去掉 6、往下一项 你会看见...
    99+
    2023-06-04
    win7显示隐藏文件 文件 winxp win7 方法
  • javascript隐藏显示div的两种方式实例
    目录设置方法:JS隐藏和显示div的方式有两种:方式一:设置元素style对象中的display属性方式二:设置元素style对象中的visibility属性总结设置方法: 1、使用...
    99+
    2022-11-13
  • Android ListView中headerview的动态显示和隐藏的实现方法
    Android ListView中headerview的动态显示和隐藏的实现方法1.动态设置headerview的方法动态设置headerview有两个思路。方法一将header的布局写在list item的布局文件中,在adapter中通...
    99+
    2023-05-30
    android listview headerview
  • Android实现密码隐藏和显示
    本文实例为大家分享了Android实现密码隐藏和显示的具体代码,供大家参考,具体内容如下 在Android开发中,需要密码的隐藏和显示,下面就和大家分享一下使用方法: xml代码: ...
    99+
    2022-11-13
    Android密码隐藏 Android密码显示 Android密码隐藏显示
  • Android 显示和隐藏输入法实现代码
    代码如下: // 隐藏输入法 InputMethodManager imm = (InputMethodManager) getApplicationContext().ge...
    99+
    2022-06-06
    输入 输入法 Android
  • Android ListView自动显示隐藏布局的实现方法
    借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有...
    99+
    2022-06-06
    方法 布局 listview Android
  • Vue如何实现鼠标悬浮隐藏与显示图片效果
    这篇“Vue如何实现鼠标悬浮隐藏与显示图片效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue如何实现鼠标悬浮隐藏与显示...
    99+
    2023-07-04
  • deepin20隐藏文件怎么取消隐藏?deepin显示隐藏文件的方法
    deepin20怎么显示隐藏文件?deepin20系统中有很多重要的文件被隐藏了,想要修改,需要显示出来,,该怎么显示呢?下面我们就来看看详细的教程。 点任务栏上的【文件管理器】。 在【文件管理器】中点右上角的下拉菜单按钮...
    99+
    2022-06-01
    deepin 隐藏文件 deepin20
  • jQuery实现HTML元素隐藏和显示
    让我们来模仿一下淘宝网当你搜索某个商品的时候,那种显示全部品牌和显示部分品牌的功能。 首先我们来理清一下思路: 1、一开始需要先隐藏需要隐藏的元素 2、你需要通过jquery获取需要...
    99+
    2022-11-12
  • javascript怎么实现点击按钮显示/隐藏
    本文小编为大家详细介绍“javascript怎么实现点击按钮显示/隐藏”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript怎么实现点击按钮显示/隐藏”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一...
    99+
    2023-07-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作