display 与 visibility 的区别（隐藏Dom元素）

display 与 visibility

display与visibility都是用来隐藏Dom元素用的，他们的显示效果几乎没有差别,但是他们还是存在一些不同的地方,我们来看看他们之间的一些异同

同:

(1)他们都能隐藏元素;document.getElementById("id").style.display = "none"; 或者.style.visibility = "hidden";

(2)他们都是css的属性,从上面的用法已经能够看出,应用时需要加上.style;

异：

(1)display将元素隐藏后,元素相当于从标准的文档流中移除了，不在占据原本的位置；而visibility则完全相反；

(2)最大的一点区别就是效率问题了;因为display需要将元素从标准的文档流中移除,那么移除后则必定需要将整个的页面重新进行加载,导致了浏览器的第二次解析,如果页面中多处用到则必定会影响效率(但是现在的浏览器解析速度确实要快很多了),这并不代表着任何时候都要用visibility，有时需要它不占据原有位置时那么就必须使用display属性了.

经验：刚开始做项目时确实用display用得多,但是随着对js的深入了解,慢慢的会选择最合适的用法，这也是我们必须学会的,没有最好的用法,只有最合适的用法(因具体的需求而异)