怎么在css中顯示與隱藏元素

本篇文章給大家分享的是有關怎么在css中顯示與隱藏元素，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

display

對于元素顯隱來說，最常見就是display:none | display:block，但是使用這種方法有個問題，元素的display屬性在隱藏前并不都是block，還有可能是inline、inline-block等

注意：如果要適用于任何元素需要提前儲存元素的display值

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試文字</div>

<script>
show.onclick = function(){
    test.style.display = 'block';
}    
hide.onclick = function(){
    test.style.display = 'none';
}
</script>

visibility

visibility:hidden與display:none作為隱藏元素的兩種方式，常常被人們拿來比較。其實區別很簡單，前者不脫離文檔流，保留隱藏之前元素占據的物理區域；而后者則脫離文檔流，如果重新顯示則需要頁面的重新繪制。還有一點區別卻很少人提到，如果父級設置display:none;子級設置display:block也不會顯示；而如果父級設置visibility:hidden;子級設置visibility:visible時子級會顯示出來

注意：visilibity可應用transition屬性。因為visibility是離散步驟，在0到1數字范圍之內，0表示隱藏，1表示顯示。visibility:hidden可以看成visibility:0；visibility:visible可以看成visibility:1。于是，visibility應用transition等同于0~1之間的過渡效果。實際上，只要visibility的值大于0就是顯示的。由于這個現象，我們可以利用transition實現元素的延時顯示隱藏

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試文字</div>

<script>
show.onclick = function(){
    test.style.transition = 'none';
    test.style.visibility = 'visible';
}    
hide.onclick = function(){
    test.style.transition = 'visibility 0.2s 0.5s';
    test.style.visibility = 'hidden';
}
</script>

hidden

可能有些人不太熟悉，HTML有個hidden全局屬性，專門用于顯示隱藏元素，與display:none的作用類似，元素隱藏時脫離文檔流，無法接受javascript事件

注意：IE10-不支持test.hidden='hidden'寫法，只支持test.setAttribute('hidden','hidden')寫法

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試文字</div>

<script>
show.onclick = function(){
    test.removeAttribute('hidden');
    /*test.hidden = '';*/
}    
hide.onclick = function(){
    test.setAttribute('hidden','hidden');
    /*test.hidden = 'hidden';*/
}
</script>

opacity

對于元素顯隱，opacity的使用頻率也挺多。opacity的好處是，即使opacity為0的元素，仍然可以接受javascript事件，這是display:none和visiblity:hidden所不具備的。

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<button id="reset">還原</button>
<div id="test">測試文字</div>

<script>
show.onclick = function(){
    test.style.transition = 'none';
    test.style.opacity = '1';
}    
hide.onclick = function(){
    test.style.transition = 'opacity 0.2s';
    test.style.opacity = '0';
}
test.onclick = function(){
    this.style.width = '200px';
}
reset.onclick = function(){
    history.go();
}
</script>

overflow

CSS中有一個屬性是overflow，overflow:hidden代表著溢出隱藏。我們可以利用父級的overflow:hidden配合父級的height:0或width:0來實現元素的顯隱

注意：當設置overflow的元素在絕對定位元素和其包含塊之間的時候，overflow屬性會失效

<style>
#testWrap{
    height: 70px;
    transition: height 1s;
    overflow: hidden;
}
</style>

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="testWrap">
    <div id="test">測試內容</div>        
</div>

<script>
show.onclick = function(){
    testWrap.style.height = '70px';
}    
hide.onclick = function(){
    testWrap.style.height = '0';
}
</script>

clip

CSS裁剪clip這個屬性平時用的不多，當clip:rect(top,right,bottom,left)中的top>=bottom，或者left>=right時，可實現元素的隱藏效果，效果類似于visibility:hidden

注意：clip屬性只能應用在絕對定位元素上

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試內容</div>

<script>
show.onclick = function(){
    test.style.position ='static';
    test.style.clip = 'auto';
}    
hide.onclick = function(){
    test.style.position ='absolute';
    test.style.clip = 'rect(0 0 0 0)';
}
</script>

transform

CSS變形transform是一些效果的集合，主要是移動、旋轉、縮放和傾斜這四種基本操作，還可以通過設置matrix矩陣來實現更復雜的效果。通過不同的變形函數可以實現元素顯隱效果

注意：IE9-瀏覽器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前綴

【1】scale

transform:scale(0)時，元素被隱藏

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試內容</div>

<script>
show.onclick = function(){
    test.style.transform ='scale(1)';
}    
hide.onclick = function(){
    test.style.transform ='scale(0)';
}
</script>

【2】rotate

transform:rotateX(90deg)時，元素被隱藏

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試內容</div>

<script>
show.onclick = function(){
    test.style.transform ='rotateX(0)';
}    
hide.onclick = function(){
    test.style.transform ='rotateX(90deg)';
}
</script>

【3】skew

transform:skew(90deg)時，元素被隱藏

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試內容</div>

<script>
show.onclick = function(){
    test.style.transform ='skew(0)';
}    
hide.onclick = function(){
    test.style.transform ='skew(90deg)';
}
</script>

覆蓋

利用定位元素可以覆蓋普通流元素的特性。為元素的before偽元素設置相同的尺寸，通過控制偽元素的定位屬性，實現顯隱效果

<style>
#test:hover:before{
    content: "";
    position: absolute;
    width: 100px;
    height: 60px;
    background-color: white;
}    
</style>

<div>測試內容</div>
//鼠標移入移出會出現元素的顯隱效果

偏移

元素顯示隱藏的另一種常見思路是偏移，將元素移動到視窗范圍外，也可以實現等價的顯隱效果

【1】margin-top

利用負margin將元素移出視窗外，要注意的是設置負margin的元素并沒有脫離普通流，后續元素會跟著一起移動

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試內容</div>

<script>
show.onclick = function(){
    test.style.marginTop ='10px';
}    
hide.onclick = function(){
    test.style.marginTop ='-9999px';
}
</script>

【2】left

通過設置相對定位或絕對定位元素的偏移屬性，將元素移動到視窗外

<style>
#test{
    position: relative;
/*  position: absolute; */
}    
</style>

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試內容</div>

 <script>
show.onclick = function(){
    test.style.left ='0';
}    
hide.onclick = function(){
    test.style.left ='-9999px';
}
</script>

【3】translate

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試內容</div>

<script>
show.onclick = function(){
    test.style.transform ='translate(0,0)';
}    
hide.onclick = function(){
    test.style.transform ='translate(-9999px,-9999px)';
}
</script>

以上就是怎么在css中顯示與隱藏元素，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。