HTML元素隐藏和显示

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

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

         2.通过CSS样式控制

一、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>

二、css 样式控制

1.通过visibility

visibility: hidden, visible

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

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

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

2.通过display

display: block, inline, none

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