Fork me on GitHub

display:none与visibility:hidden的对比

深入display:none

  • 我们都清楚当元素设置display:none后,界面上将不会显示该元素,并且该元素不占布局空间,但我们仍然可以通过JavaScript操作该元素
  • 这个涉及到浏览器的渲染原理:浏览器会解析HTML标签生成DOM Tree解析CSS生成CSSOM,然后将DOM Tree和CSSOM合成生成Render Tree,元素在Render Tree中对应0或多个盒子,然后浏览器以盒子模型的信息布局和渲染界面。而设置为display:none的元素则在Render Tree中没有生成对应的盒子模型,因此后续的布局、渲染工作自然与它无关,至于DOM操作还是可以的
  • 但除了上面的知识点外,还有以下8个是我们需要注意的:
1、原生默认display:none的元素
  • 其实浏览器原生元素中有不少自带display:none的元素,如linkscriptstyledialoginput[type=hidden]等。
2、HTML5中新增hidden布尔属性,让开发者自定义元素的隐藏
  • 示例:
    1
    2
    3
    4
    5
    6
    /* 兼容原生不支持hidden属性的浏览器  */
    [hidden]{
    display: none;
    }

    <span hidden>Hide and Seek: You can't see me!</span>
3、父元素为display:none,后代元素都不可见
  • 示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .hidden{
    display: none;
    }
    .visible{
    display: block;
    }

    *** START ***
    <div class="hidden">
    I'm parent!
    <div class="visible"> I'm son! </div>
    </div>
    *** END ***
  • 浏览器直接显示为:

    1
    2
    *** START ***
    *** END ***
4、无法获取焦点
  • 示例:
    1
    2
    <input type="hidden">
    <div tabindex="1" style="display:none">hidden</div>
5、无法响应任何事件,无论是捕获、命中目标和冒泡阶段均不可以
  • 由于display:none的元素根本不会在界面上渲染,就是连一个像素的都不占,因此自然无法通过鼠标点击命中,而元素也无法获取焦点,那么也不能成为键盘事件的命中目标
  • 当父元素的displaynone时,子元素的display必定为none,因此元素也没有机会位于事件捕获或冒泡阶段的路径上,因此display:none的元素无法响应事件
6、不耽误form表单提交数据
  • 虽然我们无法看到display:none的元素,但当表单提交时,依然会将隐藏的input元素的值提交上去
    1
    2
    3
    4
    <form>
    <input type="hidden" name="id">
    <input type="text" name="gguid" style="display:none">
    </form>
7、display变化时将触发reflow
  • 撇开display:none,我们看看display:block表示元素位于BFC中,而display:inline则表示元素位于IFC中,也就是说display就是用于设置元素所属的布局上下文,若修改display值则表示元素采用的布局方式已发生变化,因此,display变化时将触发reflow
8、display:none让transition失效

深入visibility

  • visibility有两个不同的作用:
    ① 用于隐藏表格的行和列
    ② 用于在不触发布局的情况下隐藏元素
  • visibility有四个有效值:
    ① visible:在界面上显示元素。
    ② hidden:让元素在见面上不可视,但保留元素原来占有的位置。
    ③ collapse:用于表格子元素(如tr,tbody,col,colgroup)时效果和display:none一样,用于其他元素上时则效果与visibility:hidden一样。不过由于各浏览器实现效果均有出入,因此一般不会使用这个值
    ④ inherit:继承父元素的visibility值。

visibility:hidden的注意事项

  • 参照上面对display:none列出的8点注意事项,可对照列出visibility:hidden的注意事项:
1、父元素为visibility:hidden,而子元素可以设置为visibility:visible并且生效
  • 示例:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    div{
    border: solid 2px blue;
    }
    .visible{
    visibility: visible;
    }
    .hidden{
    visibility: hidden;
    }
    <div class="hidden">
    I'm Parent.
    <div class="visible">
    I'm Son.
    </div>
    </div>
2、和display:none一样无法获得焦点
3、可在冒泡阶段响应事件
  • 由于设置为visibility:hidden的元素其子元素可以为visibility:visible,因此隐藏的元素有可能位于事件冒泡的路径上,因此下面代码中,将鼠标移至属性为.visible的元素时,.hidden会的元素响应hover事件显示:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    div{
    border: solid 2px blue;
    }
    .visible{
    visibility: visible;
    }
    .hidden{
    visibility: hidden;
    }
    .hidden:hover{
    visibility: visible;
    }
    <div class="hidden">
    I'm Parent.
    <div class="visible">
    I'm Son.
    </div>
    </div>
4、和display:none一样不妨碍form表单的提交
5、Transition对visibility的变化有效
6、visibility变化不会触发reflow
  • 由于从visible设置为hidden时,不会改变元素布局相关的属性,因此不会触发reflow,只是静静地和其他渲染变化一起等待浏览器定时重绘界面。
------ 本文结束 ------