欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

在網(wǎng)頁制作中，元素的顯示隱藏是非常常見的需求。本文將介紹元素顯示隱藏的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作為隱藏元素的兩種方式，常常被人們拿來比較。其實(shí)區(qū)別很簡單，前者不脫離文檔流，保留隱藏之前元素占據(jù)的物理區(qū)域；而后者則脫離文檔流，如果重新顯示則需要頁面的重新繪制。還有一點(diǎn)區(qū)別卻很少人提到，如果父級設(shè)置display:none;子級設(shè)置display:block也不會顯示；而如果父級設(shè)置visibility:hidden;子級設(shè)置visibility:visible時子級會顯示出來

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

<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來實(shí)現(xiàn)元素的顯隱

注意：當(dāng)設(shè)置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">測試內(nèi)容</div>        
</div>

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

clip

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

注意：clip屬性只能應(yīng)用在絕對定位元素上

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試內(nèi)容</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是一些效果的集合，主要是移動、旋轉(zhuǎn)、縮放和傾斜這四種基本操作，還可以通過設(shè)置matrix矩陣來實(shí)現(xiàn)更復(fù)雜的效果。通過不同的變形函數(shù)可以實(shí)現(xiàn)元素顯隱效果

注意：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">測試內(nèi)容</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">測試內(nèi)容</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">測試內(nèi)容</div>

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

覆蓋

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

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

 

<div>測試內(nèi)容</div>
//鼠標(biāo)移入移出會出現(xiàn)元素的顯隱效果

偏移

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

【1】margin-top

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

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試內(nèi)容</div>

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

【2】left

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

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

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test">測試內(nèi)容</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">測試內(nèi)容</div>    


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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用CSS隱藏元素滾動條的示例代碼

    這篇文章主要介紹了使用CSS隱藏元素滾動條的示例代碼,需要的朋友可以參考下
    2019-07-10

  • CATIA裝配體中的所有參考元素怎么隱藏?

    CATIA裝配體中的所有參考元素怎么隱藏？CATIA轉(zhuǎn)配體中有很多參考元素，看上去工程圖很亂，想要統(tǒng)一隱藏所有的參考元素，該怎么隱藏呢？下面我們就來看看詳細(xì)的教程，需要的
    2017-12-08

  • CSS隱藏頁面元素的5種方法

    這篇文章主要為大家詳細(xì)介紹了CSS隱藏頁面元素的5種方法，大家可以根據(jù)具體情況選擇適合的方法來隱藏元素，感興趣的小伙伴們可以參考一下
    2016-07-06

  • CSS“隱藏”元素的多種方法的對比

    這篇文章主要為大家介紹了CSS“隱藏”元素的多種方法，并對CSS“隱藏”元素的多種方法進(jìn)行對比，感興趣的小伙伴們可以參考一下
    2016-02-17

  • 隱藏 Web 中的元素方法及優(yōu)缺點(diǎn)教程詳解

    這篇文章主要介紹了隱藏 Web 中的元素方法及優(yōu)缺點(diǎn)教程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-05-13

最新評論