阅读 65

CSS元素隐藏的几种方法

使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。

隐藏元素的最佳实践有如下方法

  • display:none;
    如果希望元素不可见,同时不占据空间,辅助设备无法访问,但资源有加载,DOM 可 访问,则可以直接使用 display:none 隐藏。

    .container {
        display:none;
    }
    复制代码

    使用 display: none 可以让元素以及它所有的内容(包括所有子元素)都不会生成也不会保留其本该占有的位置,从而元素不会被展示。

  • visibility: hidden;

如果希望元素不可见,不能点击,辅助设备无法访问,但占据空间保留,则可以使用 visibility:hidden 隐藏。 css .container { visibility: hidden; } 如果希望元素不可见,同时不占据空间,辅助设备无法访问,但显隐的时候可以有 transition 淡入淡出效果,则可以使用 css .item { visibility: hidden; position: absolute; }

  • 透明度opacity: 0;
    如果单纯希望元素不可见,但位置保留,可以点击,则直接让透明度为 0。

    .opacity {
        opacity: 0;
     }
    复制代码

    如果希望元素不可见,而且不占据空间, 但可以点击,则可以使用透明度。

    .opacity {
        opacity: 0;
        position: absolute;
     }
    复制代码
  • overflow:hidden; 如果希望隐藏元素超出所设置的宽和高部分,使用overflow:hidden;

  • 把元素移出屏幕可视区

    .item {
        position:absolute;
        left:-9999px;
    }
复制代码

或者

    .item {
       margin-left:-9999px; 
    }
复制代码
  • 设置元素宽 高为 0

参考资料

CSS隐藏元素的N种实现方式