元素隐藏的三种方式

  

.hidden{
    position:absolute;
    top:-9999em;
}

.hidden{
    position:absolute;
    visibility:hidden;
}

.hidden{
    position:absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！
如果希望隐藏内容能够被辅助阅读设备识别，就不能使用display:none以及visibility:hidden隐藏元素;
使用absolute隐藏于显示元素是会产生重绘而不会产生强烈的回流。而使用display:none不仅会重绘，还会产生回流，DOM影响范围越广，回流越强烈。所以，就JavaScript交互的呈现性能上来讲，使用absolute隐藏是要优于display相关隐藏的。

使用display显示隐藏元素的时候,不能确定元素的类型.如果错将内联元素显示为block,就会发生换行;况且，随着浏览器的不断进步，以后类似于display:table-cell，display:list-item会越来越多的使用。再想通过display实现通用的显隐方法难度又会增大些;
jQuery的显隐方法show()/hide()/toggle()就是基于display的，其会存储元素先前的display属性值，于是元素再显示的时候就可以准确地显示出之前的display值了;

但是使用absolute定位就会简单很多:

   position:absolute + visibility:hidden方法，当我们要让元素（原本非绝对定位元素）显示的时候，我们需要设置：

dom.style.position = "static";
dom.style.visibility = "visible";

   而类似的position:absolute + top:-999em方法，当我们要让元素（原本非绝对定位元素）显示的时候，我们只需要设置：

dom.style.position = "static";

   而无需担心原本标签的是inline水平还是block水平。所以，就显隐的JavaScript控制上来讲，absolute相关方法要比display略胜一筹;

 

   综上,元素显隐使用absolute定位比较合适

转载于:https://www.cnblogs.com/jarvisen/p/4483726.html