• 技术文章 >web前端 >前端问答

    div css怎么实现显示隐藏

    藏色散人藏色散人2021-04-09 09:02:57原创93

    css实现div显示隐藏的方法:1、使用CSS的display属性来隐藏或显示div;2、使用CSS的visibility属性来隐藏或显示div即可。

    本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    CSS 实现div显示或隐藏的三种方法(display 和 visibility的区别)

    1、使用CSS的 display 属性来隐藏或显示div:

    display 属性规定元素应该 生成的框的类型,可以通过 display:none 来隐藏某一元素。

    style="display: none;"
    document.getElementById("typediv1").style.display="none";//隐藏
    document.getElementById("typediv1").style.display="";//显示

    2、使用CSS的 visibility 属性来隐藏或显示div:

    visibility 属性指定一个元素是否是可见的,可以通过 visibility:hidden 来隐藏某一元素。

    style="visibility: none;"
    document.getElementById("div1").style.visibility="hidden";//隐藏
    document.getElementById("div1").style.visibility="visible";//显示

    display 和 visibility 属性的区别:

    display属性设置一个元素应该如何显示,而visibility属性指定一个元素应可见还是隐藏。

    隐藏元素 -display:none 或 visibility:hidden

    隐藏一个元素可以通过把display属性设置为none,或把visibility属性设置为hidden。但是请注意,这两种方法会产生不同的结果。

    visibility:hidden:可以隐藏某一元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,也就是说,该元素虽然被隐藏了,但仍然会影响布局。

    h1.hidden {visibility:hidden;}

    display:none:可以隐藏 某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

    h1.hidden {display:none;}

    所以display和visibility控制的分别是html元素是否存在和是否显示,dispay的属性定义该元素存在或不存在,而visibility属性只是控制该元素是否显示出来,实际上还是存在的。

    【推荐学习:css视频教程

    使用JQuery的 show() 和 hide() 方法将一个div显示或隐藏:

    注:show() 适用于通过 jQuery 方法 和 CSS中 display:none 隐藏的元素(你适用于通过 visibility:hidden 隐藏的元素)。

    语法:$ (selector).show(speed,easing,callback) 具体参数详情 点这里

    $("button").click(function(){
        $("p").show();
    });

    提示:这与CSS属性display:none 类似。

    注释:隐藏的元素不会被完全显示(不影响页面的布局)。

    语法:$ (selector).hide(speed,easing,callback) 具体参数详情 点这里

    $("button").click(function(){
        $("p").hide();
    });

    以上就是div css怎么实现显示隐藏的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css3新增选择器有哪些 下一篇:css字体如何加粗
    第15期线上培训班

    相关文章推荐

    • css如何制作圆• css怎么设置字体颜色• css3新增选择器有哪些• css字符间距怎么设置• css怎么实现多行文本溢出隐藏

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网