javascript如何隐藏显示div
这篇文章给大家分享的是有关javascript如何隐藏显示div的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
JavaScript有什么特点
1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。
设置方法：1、使用style对象的display属性，值为“none”可隐藏div元素，值为“block”可显示元素；2、使用style对象的visibility属性，值为“hidden”可隐藏div元素，值为“visible”可显示元素。
本教程操作环境：windows7系统、javascript1.8.5版、Dell 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隐藏后不占用原来的位置，而通过visibility进行隐藏后元素位置任然被占用。
效果如下所示：
第一种方式隐藏前
隐藏后不占用原来的位置
第二种方式隐藏前
第二种方式隐藏后，任然占据原来的位置。
完整代码如下：
<head> <script type="text/javascript"> function fn1(){ var t = document.getElementById('test'); if(t.style.display === 'none') { t.style.display = 'block';// 以块级元素显示 } else { t.style.display = 'none'; // 隐藏 } } function fn2(){ var t = document.getElementById('test'); if(t.style.visibility === 'hidden') { t.style.visibility = 'visible'; } else { t.style.visibility = 'hidden'; } } </script></head><body><div id="test" style="border: solid 1px #e81515; width:500px;"> 这是一个将要隐藏的DIV。<br> 这是一个将要隐藏的DIV。<br> 这是一个将要隐藏的DIV。<br> 这是一个将要隐藏的DIV。<br></div><button onclick="fn1()">第一种方式</button><button onclick="fn2()">第二种方式</button></body>感谢各位的阅读！关于“javascript如何隐藏显示div”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
