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

我们进行网页开发的时候,经常需要运用JS去控制某个div的显示或者隐藏。下面小编通过实例教大家如何实现这种功能。

操作方法

  • 01

    打开Sublime Text编辑器,新建一个HTML文档,注意一定要设置编码格式为utf8,如下图所示

  • 02

    然后在Body区域准备一个div和一个button按钮,接下来会实现点击按钮来显示和隐藏DIV,如下图所示

  • 03

    接下来我们实现JS脚本的功能,如下图所示,主要运用display属性来控制div的显示或者隐藏

  • 04

    最后运行页面,我们点击按钮的时候就会实现对div区域的显示或者隐藏了,如下图所示

(0)

相关推荐

  • REVIT中控制图元的显示与隐藏的方法教程

    Revit建模过程中经常会遇到图元的相互遮挡的情况,为了将一些图元显示出来,就需要将一些不需要显示的图元隐藏掉,这就需要用到“隐藏/重置”工具 方法: 1.在Revit绘图窗口左下角提供了一排的小工具 ...

  • Axure RP 8设怎么用按钮控制图片的显示与隐藏?

    Axure RP 8中自带了图片元件,导入图片后可以调整样式显示.添加按钮,控制图片显示和隐藏.下面利用一个实例说明按钮控制图片显示和隐藏的用法,操作如下: 1.打开Axure RP 8设计软件,在元 ...

  • REVIT中如何控制图元的显示与隐藏

    Revit建模过程中经常会遇到图元的相互遮挡的情况,为了将一些图元显示出来,就需要将一些不需要显示的图元隐藏掉,这就需要用到"隐藏/重置"工具 操作方法 01 在Revit绘图窗口 ...

  • Axure RP 8怎么使用按钮控制图片的显示或隐藏?

    Axure RP 8中想要制作一个按钮点击事件控制图片显示的效果,如果不点击显示按钮图片就不显示,该怎么设置呢?下面我们就来看看详细的教程. 1.打开Axure RP 8设计软件,在元件库中的基本元件 ...

  • css控制比较div显示/隐藏方法的2种方法

    CSS中的display和visibility css中display和visibility语法,他们都可以隐藏和显示html元素.看齐来他们很相似,所以很多人还是会搞错.谈们的属性分别如下: 操作方 ...

  • js中鼠标滑过显示内容,移出隐藏内容效果

    在做网页的时候这是经常会遇到的一个效果,鼠标滑过一个div的时候内容显示,鼠标移出div的时候内容隐藏.其实这在js中是个非常简单的效果,很好实现,下面我来给大家敲下代码看是如何一步步实现的,大家按照 ...

  • jQuery如何显示和隐藏div

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

  • vs2015怎么控制网页中的头像显示或隐藏?

    vs2015制作网站的时候,想要实现当用户登录网站时,在网站上要显示头像,如果没有登录则要隐藏头像,下面我们就来看看详细的教程. 1.用Visual Studio打开一个网页,找到script标签. ...

  • Excel 2007千位分隔符的显示或隐藏

    千位分隔符是Excel中常用的数据符号。今天我们来了解如何控制Excel 2007里千位分隔符的显示或隐藏。 1、选择要设置格式的单元格。 提示 要取消选择的单元格区域,请单击工作表中的任意单元格。 ...