js显示隐藏div

如何使用JavaScript设置一个div点击从显示变为隐藏,再次点击从隐藏变为显示呢?实现的代码很简单,点击时先判断div是否是显示,如果div是显示就把div设置为隐藏,否则就变为显示。
js代码: document.getElementById("hide").style.display = "block";

操作方法

  • 01

    打开html开发软件,新建一个html文件。如图:

  • 02

    在html文件上创建一个button按钮,然后给这个按钮设置一个id,在案例中把按钮的id设置为show。如图: 代码:<input type="button" id="show" value="显示隐藏div" />

  • 03

    然后创建一个隐藏的div,把需要隐藏的内容写到这个div上,然后给这个div设置一个id,在案例中设置案例的id为hide。如图: 代码:<div id="hide">我是隐藏的div</div>

  • 04

    给div设置隐藏的样式。在<title>标签后面为id为hide设置样式display:none,这个样id为hide的div就会被隐藏掉了。如图: 样式代码: <style> #hide{display: none;padding-top: 15px;} </style>

  • 05

    为button按钮添加一个点击后隐藏事件。点击button按钮后,把隐藏的div的display修改为block,这样点击后div就会显示了。如图: 事件代码: <script type="text/javascript"> window.onload = function(){ document.getElementById("show").onclick = function(){ document.getElementById("hide").style.display = "block"; } } </script>

  • 06

    保存好html后使用浏览器打开,点击button按钮就会发现隐藏的div就会显示出来了。如图:

  • 07

    所有代码。可以直接把所有代码复制到新建的html文件上,保存好后运行即可看到效果。如图: 所有代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js显示隐藏div</title> <style> #hide{display: none;padding-top: 15px;} </style> <script type="text/javascript"> window.onload = function(){ document.getElementById("show").onclick = function(){ document.getElementById("hide").style.display = "block"; } } </script> </head> <body> <input type="button" id="show" value="显示隐藏div" /> <div id="hide">我是隐藏的div</div> </body> </html>

(0)

相关推荐

  • 怎么用js显示隐藏div

    怎么用js来显示或隐藏一个div?很简单,下面一起来看一下. 操作方法 01 首先我们创建一个div,和一个按钮.用按钮的点击来控制div的显示或隐藏. 02 添加一个样式名叫hide的样式,主要是设 ...

  • JS如何控制DIV的显示和隐藏

    我们进行网页开发的时候,经常需要运用JS去控制某个div的显示或者隐藏.下面小编通过实例教大家如何实现这种功能. 操作方法 01 打开Sublime Text编辑器,新建一个HTML文档,注意一定要设 ...

  • jQuery如何显示和隐藏div

    jQuery是js中一款很强大的库,jQuery封装了很多js方法,那么jQuery如何显示和隐藏div呢?其实这只是一个很简单的小功能.下面小编就来为大家介绍一下jQuery如何显示和隐藏div,一 ...

  • jquery的toggle实现点击按钮时显示/隐藏图片

    下面是使用html+css+jquery来完成点击按钮时显示/隐藏图片的功能,主要用到了jquery中的一个toggle()方法. 操作方法 01 首先创建一个html文件,然后在body下创建一个d ...

  • dreamweaver显示隐藏元素行为的操作方法

    一、Dreamweaver显示-隐藏元素行为 1. 在网页中插入AP Div,也就是常说的层。 2. 选择<body>标签、某个链接(<a>)标签或者选择一个AP元素。 3. ...

  • win7与xp系统中如何显示隐藏的文件

    隐藏的文件夹怎么显示?相信很多电脑新手朋友都会问这个问题,比如我们一般可以看到C盘系统盘里的系统文件是隐藏的,那么如何查看已经隐藏了的文件或曾经自己将文件夹设置为隐藏,要查看,怎么让隐藏文件显示出来呢 ...

  • 在Word2010文档中设置和显示隐藏文字的图文方法教程

    用户在使用Word2010编辑文档的过程中,常常需要将Word文档中的特定文字设置为隐藏文字,以实现保密效果。本篇教程介绍在Word2010文档中设置和显示隐藏文字的方法。 1.设置隐藏文字 用户可以 ...

  • 在桌面显示/隐藏输入法及输入法热键的设置

    在实际应用过程中,可以根据需要设置在桌面显示/隐藏输入法,也可以为输入法设置热键。 1.显示/隐藏输入法 在应用电脑的过程中,如果发现任务栏上的输入法不见了,该怎么办呢?拔示输入法的方法如下。 第1步 ...

  • win7 64位系统中为右键菜单添加显示隐藏系统文件和文件扩展名的方法

    win7 64位右键添加显示隐藏系统文件和文件扩展名 一、新建一个文档,输入如下代码并另存为:SuperHidden.reg 01 REGEDIT4 02 [HKEY_CLASSES_ROOT/Dir ...