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

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显示隐藏的案例：

//隐藏，element == 触发事件的元素

//      element2 == 需要隐藏的元素

elementonclick = function(){

    element2styledisplay = "none";

}

//显示

elementonclick = function(){

    element2styledisplay = "block";

}

//这是最简单的js实现的元素显示隐藏，当然还有其他方法，就举个最简单的

使用JavaScript控制div的显示隐藏，通常是修改div元素的display为none。

display属性 定义和用法

display 属性规定元素应该生成的框的类型。

display属性 可能的值

JavaScript控制div的隐藏

比如我们有一个id为div1的div元素

<div id="div1"></div>

隐藏，代码如下

documentgetElementById("div1")styledisplay="none";

显示，代码如下

documentgetElementById("div1")styledisplay="block";

其他方式

除了修改display,还可以通过修改元素的宽度和高度为零实现隐藏效果。

以上就是关于js 怎么用一个按钮控制DIV来回显示和隐藏全部的内容，包括:js 怎么用一个按钮控制DIV来回显示和隐藏、如何使用js显示/隐藏一个div、js控制div的显示和隐藏等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！