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:此元素佔據一行，單獨顯示。