元素隐藏的三种方式
.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定位比较合适