本文主要介绍在javascript中隐藏和显示div的两种方法。代码非常简单。点击时，判断是否显示div。如果显示div，则将div设置为隐藏，否则将显示div。有需要的朋友可以参考一下。

目录

设置方法：JS隐藏和显示div有两种方式：方法一：在元素样式对象中设置显示属性；方法2:在元素样式对象中设置可见性属性summary。

设置方法：

1.使用style对象的display属性。值“无”可以隐藏div元素，值“块”可以显示元素；

2.使用style对象的visibility属性。值“hidden”可以隐藏div元素，值“visible”可以显示元素。

本教程运行环境：windows7系统，javascript1.8.5版本1.8.5，戴尔G3电脑。

JS隐藏和显示div的方式有两种：

方式一：设置元素style对象中的display属性

var t=document . getelementbyid(' test ')；//选择id为test的div元素

t . style . display=' none '；//隐藏选定的元素

t . style . display=' block '；//以块级别样式显示

方式二：设置元素style对象中的visibility属性

var t=document . getelementbyid(' test ')；//选择id为test的div元素

t . style . visibility=' hidden '；//隐藏元素

t . style . visibility=' visible '；//显示元素

两种方法的区别在于，将display设置为hide后，原始位置不被占用，但通过可见性隐藏后，元素位置仍然被占用。

效果如下：

第一种路前隐藏

隐藏后不要占据原来的位置。

第二种路前隐藏

第二路隐藏后，仍然占据原来的位置。

完整的代码如下：

头

脚本类型='文本/javascript '

函数fn1(){

var t=document . getelementbyid(' test ')；

if(t.style.display==='none') {

t . style . display=' block '；//显示为块级元素

}否则{

t . style . display=' none '；//隐藏

}

}

函数fn2(){

var t=document . getelementbyid(' test ')；

if(t . style . visibility===' hidden '){

t . style . visibility=' visible '；

}否则{

t . style . visibility=' hidden '；

}

}

/脚本

/头

身体

div id=' test ' style=' border:solid 1px # e 81515；宽度：500像素；'

这是一个将被隐藏的DIV。英国铁路公司

这是一个将被隐藏的DIV。英国铁路公司

这是一个将被隐藏的DIV。英国铁路公司

这是一个将被隐藏的DIV。英国铁路公司

/div

按钮onclick='fn1()'第一种方式/按钮

按钮onclick='fn2()'第二种方式/按钮

/body

总结

这就是这篇关于javascript隐藏显示div的文章。更多相关js隐藏显示div内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。