css 元素顯示隱藏的9種思路

  發布時間:2020-01-07 16:09:28   作者:大前端世界   我要評論
這篇文章主要介紹了css 元素顯示隱藏的9種思路,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

在網頁制作中,元素的顯示隱藏是非常常見的需求。本文將介紹元素顯示隱藏的9種思路

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實現一個元素高度固定寬度按比例顯示效果

    這篇文章主要介紹了css實現一個元素高度固定寬度按比例顯示效果,本文給大家分享實例代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-11-28
  • css3實現多個元素依次顯示效果

    在css3中,我們使用animation與keyframes結合,可以給元素添加各種各樣的動畫效果。這篇文章主要介紹了css3實現多個元素依次顯示效果,需要的朋友可以參考下
    2017-12-12
  • 通過CSS顯示垂直文本以垂直方式顯示文本元素

    所創建的HTML元素基本上都認為是水平的框架,有時候我們確實想以垂直方式顯示文本元素,下面演示下如何輕松做到這一點
    2014-03-24
  • css中替換元素和不可替換元素及顯示元素詳細探討

    元素是文檔結構的基礎,每個元素生成了一個包含了元素內容的框box,也譯為盒子,但是不同的元素顯示的方式會有所不同,接下來將對替換元素和不可替換元素進行詳細探討,感興
    2013-03-04
  • CSS常見的讓元素水平居中顯示的方法

    網頁制作Webjx文章簡介:用CSS讓元素居中顯示并不是件很簡單的事情—同樣的合法CSS居中設置在不同瀏覽器中的表現行為卻各有千秋。讓我們先來看一下CSS中常見的幾種讓元素水
    2009-04-02
  • css教程:css和document-CSS教程-網頁制作-網頁教學網

    Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The boo
    2008-10-17
  • 標記語言——短語元素

    點擊這里返回網頁教學網 HTML教程 欄目. 上文:標記語言——表單 原文出處 Chapter 6 <strong>,<em>與其他短語元素 在引言和前面的章
    2008-10-17

最新評論

pc蛋蛋幸运28app下载地址