隐藏一个元素的几种方法

1.将元素的display属性设为none

<div style="display:none">看不见我</div>

 

2.元素的祖先元素是隐藏的，该元素是不显示的

<div style="display: none;">
    <div>看不见我</div>
</div>

 

3.<input>标签元素的type属性设为hidden

<input type="hidden" name="看不见我">

 

4.将元素的width和heigth都设为0

<div style=“width：0；heigth：0；background-color：red”>看不见我</div>

 

5.将visibility设为hidden（visibility属性指定一个元素是否是可见的）

<div style="visibility：hidden">看不见我</div>

 

6.将opacity设为0 （opacity属性设置一个元素了透明度级别，从0.0（完全透明）到1.0（完全不透明）

<div style="opacity:0;">看不见我</div>

 

display:none、visibility:hidden 和 opacity:0 的区别

display:none 隐藏后不占据额外空间，它会产生回流和重绘

visibility:hidden 和 opacity:0 元素虽然隐藏了，但它们仍然占据着空间，它们只会引起页面重绘

 

display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了

visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来

opacity: 0 会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示