js 怎么用一个按钮控制DIV来回显示和隐藏

JavaScript014

js 怎么用一个按钮控制DIV来回显示和隐藏,第1张

1、打开Hbuilder编辑器,新建一个html空白文档,输入基本的结构,然后按下Crtl+S保存一下:

2、创建一个button按钮,给按钮设置一个id,名字设置为“myBT”,创建一个用来显示隐藏的div,将其id设置为“main”:

3、给div和button设置一些样式,为了美观好看,这里无需设置display,因为默认就是显示的:

4、编写js脚本,这里用到Jquery,给button添加一个点击事件,然后获取div的dom,判断dom中的display属性值,如果是“none”,就显示div,否则则隐藏:

5、全部完成后,按下crtl+s保存,来到编辑器的右侧,观察显示效果,此时div是显示的:

6、点击hide按钮,会发现div消失了,反复点击按钮会重复显示隐藏的效果,以上就是用JS控制div显示隐藏的案例:

js中点击一个按钮弹出一个file文件框的步骤如下:

1.在文件夹中创建一个html文件“test”。

2.在test文件中添加一个html的框架。

3.添加两个input,一个是button,一个是file把id设置为“open”style类型设置为“display:none”不显示。

4.打开后我们发现只显示这一个“打开文件”按钮。

5.现在我们给button添加onclick事件,调用openfile触发id为“open”的file。

6.现在我们在浏览器中点击“打开文件”文件按钮就会弹出选择文件路径对话框了。这样就解决了js中点击一个按钮弹出一个file文件框的问题了。