前端實(shí)現(xiàn)“隱藏的方式”的區(qū)別有哪些

這篇文章將為大家詳細(xì)講解有關(guān)前端實(shí)現(xiàn)“隱藏的方式”的區(qū)別有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

隱藏方式

隱藏一個(gè)元素可以通過(guò)以下方式：

1.HTML元素加上：hidden="hidden"。

2.屬性設(shè)置為 display ：none，或把 visibility ：hidden。但是請(qǐng)注意，這兩種方法會(huì)產(chǎn)生不同的結(jié)果

3.JS中隱藏element.hide(); 顯示element.show()

4.v-if/v-show;(Vue中的)wx:if/wx:show(微信小程序里的)

隱藏方式的解釋

hidden="hidden"

• 隱藏要占用域的空間。

寫在html內(nèi)部的

首頁(yè)

<h2 hidden="hidden"><span>首頁(yè)</span></h2>

• 刪除hidden="hidden"這條語(yǔ)句就可實(shí)現(xiàn)顯示

• CSS里面的display會(huì)覆蓋html中的hidden屬性

display ：none

• display 隱藏不占用域的空間。

隱藏的元素不會(huì)占用任何空間。也就是說(shuō)，該元素不但被隱藏了，而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失。

• display 有多種顯示方式

display：block //塊級(jí)顯示

display：inline//行級(jí)顯示

• 不刪除節(jié)點(diǎn)

雖然在頁(yè)面中消失了，但是通過(guò)js獲取節(jié)點(diǎn)的方式，還是會(huì)獲取到;僅僅只是在文檔流(及頁(yè)面中)隱藏消失而已。

visibility ：hidden

visibility 隱藏要占用域的空間。

隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說(shuō)，該元素雖然被隱藏了，但仍然會(huì)影響布局。

就像把透明度設(shè)置為0，雖然你看不見，但是你知道它就在那。

• visibility 的顯示只有一個(gè) visibility：visible;

• 不刪除節(jié)點(diǎn)

hide() show()

• 寫在JS中的

• hide()

element.hide()實(shí)際上是設(shè)置了CSS中的display為none

• show()

element.show()實(shí)際上是設(shè)置了CSS中的display為block

• 效果和display一樣。

v-if/wx:if、v-show/wx:show

• 隱藏不占用域的空間

• 隱藏true，顯示false

<div   v-if="{{true}}">    v-if</div> <view  wx:if="{{false}}">  wx:if</view>

• 隱藏會(huì)刪除元素節(jié)點(diǎn)，顯示又會(huì)添加回來(lái)

隱藏即在整個(gè)Dom結(jié)構(gòu)和頁(yè)面中都找不到，相當(dāng)于將這個(gè)元素節(jié)點(diǎn)完全刪除掉。

總結(jié)

關(guān)于“前端實(shí)現(xiàn)“隱藏的方式”的區(qū)別有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。