layui-hide：控制元素的顯示和隱藏

在Web開發中，一個容器可能有時需要顯示，有時候又要隱藏，這就需要使用到CSS的display屬性。然而，display屬性雖然是控制元素是否顯示，但是並不能像我們想像中那樣隨心所欲的改變元素的狀態。

因此LayUI中提供了一個非常好用的樣式類——layui-hide。通過簡單的在元素上添加一下樣式類，即可完美的實現元素的顯示和隱藏。

要使用layui-hide，你只需要在需要控制隱藏和顯示的元素上添加一個樣式類即可。

<div class="layui-hide">
    這個div元素默認處於隱藏狀態
</div>

如果需要顯示這個元素，只需要通過JavaScript來動態更改這個元素的樣式即可。

document.querySelector('.layui-hide').classList.remove('layui-hide');

這條JavaScript語句會去除這個元素上的layui-hide樣式類，使這個元素顯示出來。

layui-hide有兩個類名：layui-hide和layui-show。

layui-hide：表示元素處於隱藏狀態，此時元素不佔據任何空間，相當於被移除了。

<div class="layui-hide">
    這個div元素處於隱藏狀態
</div>

layui-show：表示元素處於顯示狀態，此時元素會佔據相應的空間。

<div class="layui-show">
    這個div元素處於顯示狀態
</div>

如果我們有很多個元素需要一次性隱藏，或者需要在不同的情況下隱藏多個相同的元素，這時候可以考慮使用layui-hide。

<div class="layui-hide">
    這個div元素處於隱藏狀態
</div>
<div class="layui-hide">
    這個div元素也處於隱藏狀態
</div>

這樣就可以一次性隱藏這兩個元素。

當元素需要隱藏和顯示的場景較多時，使用JavaScript動態控制元素的顯示和隱藏就顯得尤為重要。通過JavaScript的classList列表，可以簡單地增加或移除元素上的layui-hide類名，實現元素的動態顯示與隱藏。

<div id="myDiv" class="layui-show">
    這個div元素處於顯示狀態
</div>

<script>
    document.querySelector('#myDiv').classList.add('layui-hide');
</script>

這樣就可以通過JavaScript代碼將id為myDiv的元素隱藏起來。

通過對layui-hide的介紹，我們可以發現，這個簡單卻十分實用的樣式類可以幫助我們在開發過程中快速實現元素的顯示和隱藏。在需要批量控制元素狀態或者需要動態改變某個元素的狀態時，layui-hide都可以為我們提供相應的支持。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/301426.html