大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家分享的是有关javascript如何隐藏显示div的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
站在用户的角度思考问题,与客户深入沟通,找到贺州网站设计与贺州网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、网站空间、企业邮箱。业务覆盖贺州地区。
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进行隐藏后元素位置任然被占用。
效果如下所示:
第一种方式隐藏前
隐藏后不占用原来的位置
第二种方式隐藏前
第二种方式隐藏后,任然占据原来的位置。
完整代码如下:
这是一个将要隐藏的DIV。
这是一个将要隐藏的DIV。
这是一个将要隐藏的DIV。
这是一个将要隐藏的DIV。
感谢各位的阅读!关于“javascript如何隐藏显示div”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!