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

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

//隐藏,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的显示和隐藏等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9806707.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存