实现html隐藏效果的三剑客

html世界存在三位身怀隐藏绝技的剑客,分别是display:none、visibility: hidden和opacity:0。它们虽然师出同门(都具备隐身绝技),但是各自风格鲜明,招式不一。今天teren君就为诸位看客逐一剖析,娓娓道来。


  • display:none是最常用的隐藏元素的方法
    • 元素使用该属性将:不占据空间,无法点击;
    • 元素在页面上将完全消失;
    • 元素原本占据的空间被其他元素所占据,从而导致
      浏览器的重排和重绘;

上图分别是display:none和未设置display:none的效果图


  • visibility:hidden也是常用的隐藏元素的一种方法
    • 元素在页面消失,但仍然占据空间
    • 只导致浏览器重绘不导致重排
    • 适用于那些元素隐藏后不希望页面布局会发生变化的场景
实现html隐藏效果的三剑客_第1张图片

上图的第二个红色框表示visibility:hidden,此时点击第二个红色框,控制台是没有信息输出的,因为按钮及其功能已经隐藏


  • opacity:0表示元素的透明度是完全透明,起到一种隐藏效果
    • 与visibility:hidden类似,元素在页面消失且仍然占据空间
    • 但按钮及其功能仍然存在,只是肉眼看不见
实现html隐藏效果的三剑客_第2张图片

上面第一个红色框使用的是opacity:0,在点击第一个红色框,控制台是可以输出信息1的

你可能感兴趣的