css中display:none与visibility:hidden的区别分析

2024-01-17 11:13 小编
    深入display:none
    我们都清楚当元素设置display:none后,界面上将不会显示该元素,并且该元素不占布局空间,但我们仍然可以通过JavaScript操作该元素。但为什么会这样呢?
    这个涉及到浏览器的渲染原理:浏览器会解析HTML标签生成DOMTree,解析CSS生成CSSOM,然后将DOMTree和CSSOM合成生成RenderTree,元素在RenderTree中对应0或多个盒子,然后浏览器以盒子模型的信息布局和渲染界面。而设置为display:none的元素则在RenderTree中没有生成对应的盒子模型,因此后续的布局、渲染工作自然没它什么事了,至于DOM操作还是可以的。
    但除了上面的知识点外,还有以下8个点我们需要注意的
    1.原生默认display:none的元素
    其实浏览器原生元素中有不少自带display:none的元素,如link,script,style,dialog,input[type=hidden]等.
    2.HTML5中新增hidden布尔属性,让开发者自定义元素的隐藏性
    /*兼容原生不支持hidden属性的浏览器*/
    [hidden]{
    display:none;
    }
    <spanhidden>HideandSeek:Youcan'tseeme!</span>
    3.父元素为display:none,子孙元素也难逃一劫
    .hidden{
    display:none;
    }
    .visible{
    display:block;
    }
    ***START***
    <divclass="hidden">
    I'mparent!
    <divclass="visible">I'mson!</div>
    </div>
    ***END***
    浏览器直接显示为
    ***START***
    ***END***
    4.无法获取焦点
    本来无一盒,何处惹焦点呢^_^即使通过tab键也是没办法的
    <!--真心不会获得焦点-->
    <inputtype="hidden">
    <divtabindex="1"style="display:none">hidden</div>
    5.无法响应任何事件,无论是捕获、命中目标和冒泡阶段均不可以
    由于display:none的元素根本不会在界面上渲染,就是连1个像素的都不占,因此自然无法通过鼠标点击命中,而元素也无法获取焦点,那么也不能成为键盘事件的命中目标;而父元素的display为none时,子元素的display必定为none,因此元素也没有机会位于事件捕获或冒泡阶段的路径路径上,因此display:none的元素无法响应事件。
    6.不耽误form表单提交数据
    虽然我们无法看到display:none的元素,但当表单提交时依然会将隐藏的input元素的值提交上去。
    <form>
    <inputtype="hidden"name="id">
    <inputtype="text"name="gguid"style="display:none">
    </form>
    7.CSS中的counter会忽略display:none的元素
    .start{
    counter-reset:son0;
    }
    .son{
    counter-increment:son1;
    }
    .son::before{
    content:counter(son)".";
    }
    <divclass="start">
    <divclass="son">son1</div>
    <divclass="son"style="display:none">son2</div>
    <divclass="son">son3</div>
    </div>
    结果就是:
    1.son1
    2.son3
    8.Transition对display的变化不感冒
    9.display变化时将触发reflow
    撇开display:none,我们看看display:block表示元素位于BFC中,而display:inline则表示元素位于IFC中,也就是说display的用于就是设置元素所属的布局上下文,若修改display值则表示元素采用的布局方式已发生变化,不触发reflow才奇怪呢!
    深入visibility
    visibility有两个不同的作用
    用于隐藏表格的行和列
    用于在不触发布局的情况下隐藏元素
    4个有效值
    1.visible
    没什么好说的,就是在界面上显示。
    2.hidden
    让元素在见面上不可视,但保留元素原来占有的位置。
    3.collapse
    用于表格子元素(如tr,tbody,col,colgroup)时效果和display:none一样,用于其他元素上时则效果与visibility:hidden一样。不过由于各浏览器实现效果均有出入,因此一般不会使用这个值。
    4.inherit
    继承父元素的visibility值。
    对比清楚display:none和visibility:hidden
    上面我们已经对display:none列出8点注意事项,那么我们仅需对照它逐一列出visibility的不就清晰可见了吗?
    1.父元素为visibility:hidden,而子元素可以设置为visibility:visible并且生效
    div{
    border:solid2pxblue;
    }
    .visible{
    visibility:visible;
    }
    .hidden{
    visibility:hidden;
    }
    <divclass="hidden">
    I'mParent.
    <divclass="visible">
    I'mSon.
    </div>
    </div>


Tag: 分析
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码