大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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进行隐藏后元素位置任然被占用。

效果如下所示:
javascript如何隐藏显示div

第一种方式隐藏前

javascript如何隐藏显示div

隐藏后不占用原来的位置

javascript如何隐藏显示div

第二种方式隐藏前

javascript如何隐藏显示div

第二种方式隐藏后,任然占据原来的位置。

完整代码如下:


    
        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';
            }
        }
    



	
	    这是一个将要隐藏的DIV。
    这是一个将要隐藏的DIV。
    这是一个将要隐藏的DIV。
    这是一个将要隐藏的DIV。
第一种方式 第二种方式

感谢各位的阅读!关于“javascript如何隐藏显示div”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


名称栏目:javascript如何隐藏显示div
地址分享:http://dzwzjz.com/article/ppdhgs.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP