HTML元素不可见的实现方法详解

HTML元素不可见的实现方法详解

1.1 display:none;方法
        display:none;方法可使元素隐藏，并且不占据任何空间。
        对设置了display:none;属性的元素的任何用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。
        设置了display:none;属性的任何元素的子孙元素会被同时隐藏。隐藏的子元素不能通过为其设置display:none;属性来使元素可见。
        为设置了display:none;属性的元素添加过渡动画是无效的，它的任何不同状态值之间的切换总是会立即生效。
        通过 DOM 依然可以访问到这个元素。
1.2 visibility:hidden;方法
        visibility:hidden;方法可使元素不可见，但仍占据其本来空间。
        visibility:hidden;方法隐藏的元素在读屏软件中会被隐藏，即不会响应任何用户交互。
        设置了visibility:hidden;属性的任何元素的子孙元素会被同时隐藏。隐藏的子元素不能通过为其设置visibility:visible;属性来使元素可见。
        能够实现动画效果。
1.3 opacity:0;方法
        opacity:0;方法可使元素不可见，但仍占据其本来空间。
        opacity:0;方法隐藏的元素及其所有内容都会被读屏软件阅读，即响应用户交互
        设置了opacity:0;属性的任何元素的子元素都不可见。隐藏的子元素不能通过为其设置opacity:1;属性来使元素可见。
        opacity和visibility相比，其优势在于它可以被transition和animate。通常使用opacity属性来制作元素的淡入淡出效果。
1.4 overflow:hidden;方法

.textHidden{ 
    display:block;/*统一转化为块级元素*/
    width:0;
    height:0;
    overflow:hidden;
}

1.5通过绝对定位(CSS属性position:absolute;)的方式将位置设到不可见区域，从而隐藏元素
        绝对定位的方法既不会像opacity:0;方法和visibility:hidden;方法影响布局，又不会像 display:none;方法不影响布局但又无法直接交互。这个方法既不会影响布局，又能让元素保持可操作性。
        用绝对定位的方法隐藏的元素及其所有内容可以被读屏软件读取。

.textHidden{
    position:absolute;
    top:-9999px;
    left:-9999px;
}

        注意：避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果这么做，当用户让隐藏的元素获得焦点时，会导致一个不可预料的焦点切换。
1.6通过剪裁（CSS clip-path[clip，已废弃]）的方法来实现元素的隐藏
        设置剪裁区大小为零的方法可使元素隐藏，但仍占据其本来空间。
        此方法隐藏的元素不能与用户直接交互，但元素所有内容可以被读屏软件读取。
        通过DOM依然可以访问到这个元素。
        CSS clip-path属性能够使用各种过渡动画来实现不同的效果。

.textHidden {
    clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

        注意：CSS clip-path 属性还没有在IE或者Edge下被完全支持。如果要在你的 clip-path 中使用外部的SVG文件，浏览器支持度还要更低。
1.7 opacity与visibility动画效果比较
        opacity和visibility实现动画效果的方法及效果均不同。
        CSS visibility属性实现的动画效果的初始和结束状态不一样。（事实上可以用这一点来实现元素的延迟显示和隐藏）。
1.8知识拓展
1.8.1 CSS visibility属性
1、定义
        visibility属性指定一个元素应可见还是隐藏。
2、说明
        这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表格布局中删除列或行。
        默认值：visible
        继承性：yes
        版本：CSS2
        JavaScript语法：object.style.visibility="hidden"
3、语法
        visibility:visible;默认值，元素可见。
        visibility:hidden;元素不可见，但隐藏的元素仍需占用与未隐藏之前一样的空间。
        visibility:collapse;当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现"hidden"。
        visibility:inherit;规定应该从父元素继承visibility属性的值。
3、浏览器支持
        所有主流浏览器都支持visibility属性。但任何版本的Internet Explorer（包括IE8）都不支持"inherit"和"collapse"属性值。
1.8.2 CSS opacity属性
1、定义
        css opacity属性设置元素的不透明级别。
2、说明
        默认值：1
        继承性：no
        版本：CSS3
        JavaScript语法：object.style.opacity=0.5
3、语法
        opacity:value;规定不透明度。从0.0（完全透明）到1.0（完全不透明）。
        opacity:inherit;应该从父元素继承opacity属性的值。
4、浏览器支持
        所有浏览器都支持opacity属性。但IE8以及更早的版本支持替代的filter属性。例如：filter:Alpha(opacity=50)。
1.8.3 CSS overflow属性
1、定义
        overflow属性定义溢出元素内容区的内容会如何处理。
2、说明
        默认值：visible
        继承性：no
        版本：CSS2
        JavaScript 语法：object.style.overflow="scroll"
3、语法
        overflow:visible;默认值。内容不会被修剪，会呈现在元素框之外。
        overflow:hidden;内容会被修剪，并且其余内容是不可见的。
        overflow:scroll;内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
        overflow:auto;如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
        overflow:inherit;规定应该从父元素继承 overflow 属性的值。
1.9 用户交互的含义
        用户交互，即指鼠标悬停或者点动作。