显示和隐藏图片【JavaScript】

使用 JavaScript 来实现显示和隐藏图片。下面是一个简单的示例,展示如何通过按钮点击来切换图片的可见性。

实现效果:

代码:

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示和隐藏图片</title><style>#myImage {display: none;/* 初始状态为隐藏 */}</style></head><body><button id="toggleButton">显示图片</button><img id="myImage" src="./image/image1.jpg" alt="示例图片"><script>document.getElementById('toggleButton').addEventListener('click', function() {const image = document.getElementById('myImage');//使用 window.getComputedStyle(image).display 来获取图片的实际显示状态const currentDisplay = window.getComputedStyle(image).display;if (currentDisplay === 'none') {image.style.display = 'block'; // 显示图片this.textContent = '隐藏图片'; // 更新按钮文本} else {image.style.display = 'none'; // 隐藏图片this.textContent = '显示图片'; // 更新按钮文本}});</script></body>
</html>

 部分代码解析:

document.getElementById('toggleButton')
  • 这个方法用于从 HTML 文档中获取 ID 为 toggleButton 的元素。通常这个元素是一个按钮。
addEventListener('click', ...)
  • addEventListener 方法用于给这个元素添加一个事件监听器。在这个例子中,监听的事件是 'click',即用户点击按钮时触发的事件。
() => { ... }
  • 这是一个箭头函数,作为事件处理程序。当按钮被点击时,这个函数内的代码将被执行。
 const image = document.getElementById('myImage');
  • 这行代码用于获取 ID 为 myImage 的元素,通常是一个图片。获取到的元素被存储在 image 变量中,方便后续操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/430902.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python爬虫案例——抓取链家租房信息

文章目录 1、任务目标2、分析网页3、编写代码1、任务目标 目标站点:链家租房版块(https://bj.lianjia.com/zufang/) 要求:抓取该链接下前5页所有的租房信息,包括:标题、详情信息、详情链接、价格 如: 2、分析网页 用浏览器打开链接,按F12或右键检查,进入开发者模式;因…

计算机毕业设计 美发管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

OpenAI converting API code from GPT-3 to chatGPT-3.5

题意&#xff1a;将OpenAI API代码从GPT-3转换为ChatGPT-3.5 问题背景&#xff1a; Below is my working code for the GPT-3 API. I am having trouble converting it to work with chatGPT-3.5. 以下是我用于GPT-3 API的工作代码。我在将其转换为适用于ChatGPT-3.5时遇到了…

前端开发之装饰器模式

介绍 装饰器模式 是在不修改对象内部结构的情况下&#xff0c;动态地给对象添加功能的一种设计模式。在软件开发中&#xff0c;有时候我们需要为已有对象添加一些额外的行为&#xff0c;但不希望修改该对象的代码&#xff0c;装饰器模式可以很好的满足这一需求。 在TypeScrip…

echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】

在数据可视化中&#xff0c;地图是很重要的一个环节&#xff0c;很多时候需要展现的不仅是国家地图&#xff0c;还需要能从国家进入到省市。这个逐级进入的过程就是我们今天说的地图下钻。 地图下钻看起来很屌、很高大上&#xff0c;但是仔细琢磨一下&#xff0c;技术实现上真的…

Cpp类和对象(下)(6)

文章目录 前言一、初始化列表概念使用注意实际运用explicit关键字初始化列表的总结 二、static成员static成员的概念static成员的特性static的一个实用场景 三、友元友元函数友元类 四、内部类概念特性 五、匿名对象六、再次理解封装和面向对象总结 前言 Hello&#xff0c;本篇…

『玉竹』基于Laravel 开发的博客、微博客系统和Android App

基于 Laravel 和 Filament 开发, 使用 Filament 开发管理后台&#xff0c;前端比较简洁。 博客大家都清楚是什么东西&#xff0c;微博客类似于微博之类的吧&#xff0c;有时候想要写的东西可能只有几句话&#xff0c;想要起个标题都不好起。 为了是微博客功能更好用&#xff0c…

【小程序】微信小程序课程 -3 快速上手之常用方法

目录 1、 对话框 1.1 模态对话框 1.2 消息对话框 2、 存储 2.1 同步 2.1.1 同步保存数据 2.1.2 同步获取数据 2.1.3 同步删除数据 2.1.4 同步清空数据 2.2 异步 2.2.1 异步保存数据 2.2.2 异步获取数据 2.2.3 异步删除数据 2.2.4 异步清空数据 3、 上拉加载更多…

Java类加载揭秘:从加载过程到双亲委派机制

类的加载 目标 能够理解字节码加载过程 【了解】 路径 类的加载过程类的加载时机 类的加载 当程序在运行后&#xff0c;第一次使用某个类的时候&#xff0c;会将此类的class文件读取到内存&#xff0c;并将此类的所有信息存储到一个Class对象中 说明&#xff1a;Class对象…

金仓数据库 KingbaseES参考手册 (8. 函数(九))

8.299. SCALE 用法&#xff1a; scale(numeric)功能&#xff1a; SCALE返回参数的精度&#xff08;小数点后的位数&#xff09;。 例子&#xff1a; SELECT scale(8.41);8.300. SCORE 用法&#xff1a; SCORE(lable number)输入参数&#xff1a; lable&#xff1a;表示第几个co…

js发送邮件至指定邮箱功能实现方式和技巧?

js发送邮件至指定邮箱的教程&#xff1f;怎么使用Node.js发信&#xff1f; 无论是用户反馈、订单确认还是密码重置&#xff0c;js发送邮件至指定邮箱的需求无处不在。AokSend将深入探讨js发送邮件至指定邮箱的实现方式和技巧&#xff0c;帮助开发者更好地理解和应用这一功能。…

windows桌面管理软件推荐:一键整理桌面!美化电脑桌面小助手!

windows桌面管理软件推荐来咯&#xff01;在繁忙的工作和生活中&#xff0c;一个整洁、有序的电脑桌面不仅能提升工作效率&#xff0c;还能带来愉悦的视觉体验。然而&#xff0c;随着文件的增多&#xff0c;桌面往往变得杂乱无章。幸运的是&#xff0c;市面上有许多优秀的Windo…

推荐一款开源的Redis桌面客户端

TinyRDM 是一个现代化的、轻量级的跨平台 Redis 桌面客户端&#xff0c;能在 Mac、Windows 和 Linux 系统上使用。它有着现代化的设计风格&#xff0c;界面既简洁又清晰&#xff0c;操作起来方便又高效。不管是刚开始接触的新手&#xff0c;还是经验丰富的开发者&#xff0c;都…

C++标准库类——string类

引言 在c中&#xff0c;string类的引用极大地简化了字符串的操作和管理&#xff0c;相比 C 风格字符串&#xff08;char*或cahr[]&#xff09;&#xff0c;std::string 提供了更高效和更安全的字符串操作。接下来让我们一起来深入学习string类吧&#xff01; 1.string 的构造…

Spring Cache的使用

一、简介 1. Spring Cache是Spring提供的一个缓存框架&#xff0c;在Spring3.1版本开始支持将缓存添加到现有的spring应用程序中&#xff0c;在4.1开始&#xff0c;缓存已支持JSR-107注释和更多自定义的选项。 1. Spring Cache利用了**AOP**&#xff0c;实现了基于注解的缓存…

【解密 Kotlin 扩展函数】命名参数和默认值(十三)

导读大纲 1.0.1 命名参数1.0.2 默认参数值 上一节讲述如何自定义 joinToString 函数来代替集合的默认字符串表示 文末遗留下几个待优化问题–传送门 1.0.1 命名参数 我们要解决的第一个问题涉及函数调用的可读性 例如,请看下面的joinToString调用: joinToString(collection,&…

【LLM多模态】Animatediff文生视频大模型

note AnimateDiff框架&#xff1a;核心是一个可插拔的运动模块&#xff0c;它可以从真实世界视频中学习通用的运动先验&#xff0c;并与任何基于相同基础T2I的个性化模型集成&#xff0c;以生成动画。训练策略&#xff1a;AnimateDiff的训练包括三个阶段&#xff1a; 领域适配…

spark之不同序列化对比

一&#xff0c;spark的rdd的序列话不同介绍 下面是使用不同序列化后的占用资源和数据大小 2&#xff0c;sparksql中序列化的区别 sparksql中使用序列化和不使用差别不大&#xff0c;英文sparksql中默认使用了encode自己实现的序列化方法&#xff0c;加上与不加序列化差别不大…

基于真实山地场景下的超多目标优化算法求解无人机三维路径规划,MATLAB代码

超多目标优化算法是一类专门用于解决存在三个以上目标函数的最优化问题的算法。这类问题在现实世界中非常常见&#xff0c;例如在工程设计、资源管理、机器学习等领域。由于目标之间的冲突性&#xff0c;很难找到一个单一的解来同时优化所有目标&#xff0c;因此超多目标优化算…

MQ高级(二):死信交换机--延迟消息及DelayExchange插件--超时订单案例实现

目录 1.延迟消息 1.1.死信交换机和延迟消息 1.1.1.死信交换机 1.1.2.延迟消息 1.2.DelayExchange插件 1.2.1.下载 1.2.2.安装 1.2.3.声明延迟交换机 1.2.4.发送延迟消息 1.3.超时订单问题 1.3.1.定义常量 1.3.2.配置MQ 1.3.3.改造下单业务&#xff0c;发送延迟消息…