HTML元素隐藏和显示

在web前端开发过程当中，常常会用到隐藏和显示元素的方法

总结：1.经过JS或Jquery控制

         2.经过CSS样式控制

1、Js或jquery （jquery为例)

1.隐藏元素 使用hide()方法，以下图：

方法：hide()

做用: 隐藏显示的元素

示例:

$(“p”).hide();

HTML 代码:

<p>Hello word</p>

结果:

<p style="display:none">Hello word</p>

 

2.显示隐藏的元素，使用show()方法，以下图：

方法: show();

做用：显示隐藏的匹配元素

示例:

$("p").show();

HTML 代码:

<p style="display:none">Hello word</p>

结果：

<p style="display:block">Hello word</p>

2、css 样式控制

1.经过visibility

visibility: hidden, visible

visibility: 控制页面元素的显示和隐藏，不空值元素的位置特征。

hidden:隐藏元素
visible:显示元素

当元素在页面是隐藏时，会占据一个显示块，其它的元素不能使用这个位置。当元素隐藏时，它不能接收事件。

2.经过display

display: block, inline, none

none:从页面中移除这个元素，固然元素的位置也被移除。inline:此元素不会占据一行，和其它的元素一块儿组合显示。block:此元素占据一行，单独显示。