JavaScript之通过按钮实现隐藏和显示
2022/1/3 1:08:29
本文主要是介绍JavaScript之通过按钮实现隐藏和显示,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
通过按钮实现隐藏与显示
先看下效果:
1、点击前:
2、点击后:
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过按钮实现隐藏和显示</title> <style> .body { margin: 0 auto; } #show { width: 600px; height: auto; font-size: 14px; background-color: #e4c392; display: block; padding: 10px; margin: 0 auto; border-radius: 10px; } #show h1 { color: #11c2ee; margin: 0 auto; } .slide { margin: 0 auto; padding: 0; width: 600px; border-top: solid 4px #D6A55C; } .btn-slide { background-color: bisque; width: 80px; height: 30px; text-align: center; margin: 0 auto; border-radius: 8px; margin: 0 auto; display: block; } </style> <script type="text/javascript"> function divshow() { document.getElementById("btnshow").style.display="block", document.getElementById("btnhref").innerHTML="关闭", document.getElementById("btnhref").href="javascript:divhidden()" } function divhidden() { document.getElementById("btnshow").style.display="none", document.getElementById("btnhref").innerHTML="了解", document.getElementById("btnhref").href="javascript:divshow()" } </script> </head> </head> <body> <div id="show"> <h1>段落</h1> <p>段落是文章中最基本的单位。内容上它具有一个相对完整的意思;在文章中,段具有换行的标。段是由句子或句群组成的,在文章中用于体现作者的思路发展或全篇文章的层次。有的段落只有一个句子,称为独句段,独句段一般是文章的开头段、结尾段、过渡段强调段等特殊的段落。多数段落包括不止一个句子或句群,叫多句段。中文段落开头前一般空两个格。 段落也常用于日常用语中。例:"现在的工作告一段落",表示达到一定程度暂停的意思。 </p> <div id="btnshow" style="display: none;"> <p>段落是文章中最基本的单位。内容上它具有一个相对完整的意思;在文章中,段具有换行的标。段是由句子或句群组成的,在文章中用于体现作者的思路发展或全篇文章的层次。有的段落只有一个句子,称为独句段,独句段一般是文章的开头段、结尾段、过渡段强调段等特殊的段落。多数段落包括不止一个句子或句群,叫多句段。中文段落开头前一般空两个格。 段落也常用于日常用语中。例:"现在的工作告一段落",表示达到一定程度暂停的意思。 </p> </div> </div> <p class="slide"> <a href="javascript:divshow()" id="btnhref" class="btn-slide">了解</a> </p> </body> </html>
通过getElementById()这个方法找到对应元素,进而控制它的style,以此来做对应的功能。
这篇关于JavaScript之通过按钮实现隐藏和显示的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署