亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS中隱藏元素的幾種方法

vvpvvp / 636人閱讀

摘要：使用這種方法來隱藏元素，是否可以觸發(fā)事件要根據(jù)具體的情況來分析。其他的方式只作了解即可，并不推薦使用它們來隱藏元素，它們的真正用途應(yīng)該不在隱藏元素，而是通過了解這些方法的特點(diǎn)，挖掘出其真正的使用場(chǎng)景

幾種方法的簡(jiǎn)單介紹

display:none
最常用的隱藏元素的方法

.hidden{
    display:none
}

將元素設(shè)置為display:none后，元素在頁(yè)面上將徹底消失，元素本來占有的空間就會(huì)被其他元素占有，也就是說它會(huì)導(dǎo)致瀏覽器的重排和重繪
visibility:hidden
此方法也是一種常用的隱藏元素的方法，和display:none的區(qū)別在于，元素在頁(yè)面消失后，其占據(jù)的空間依舊會(huì)保留著，所以它只會(huì)導(dǎo)致瀏覽器重繪而不會(huì)重排

.hidden{
    visibility:hidden
}

visibility:hidden適用于那些元素隱藏后不希望頁(yè)面布局會(huì)發(fā)生變化的場(chǎng)景
opacity:0
opacity屬性表示元素的透明度，而將元素的透明度設(shè)置為0后，在我們眼中，元素也就是隱藏起來的，這也算是一種隱藏元素的方法

.transparent {
    opacity:0;
}

這種方法和visibility:hidden的一個(gè)共同點(diǎn)是元素隱藏后依舊占據(jù)著空間，但我們都知道，設(shè)置透明度為0后，元素只是隱身了，它依舊存在頁(yè)面中
設(shè)置height，width等盒模型屬性為0
一種比較奇葩的技巧，簡(jiǎn)單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其overflow:hidden來隱藏其子元素

.hiddenBox {
    margin:0;
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

這種方式既不實(shí)用，也存在著著一些問題。但平時(shí)我們用到的一些頁(yè)面效果可能就是采用這種方式來完成的，比如jquery的slideUp動(dòng)畫，它就是設(shè)置元素的overflow:hidden后，接著通過定時(shí)器，不斷地設(shè)置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom為0，從而達(dá)到slideUp的效果

元素隱藏后的事件響應(yīng)

如果被隱藏的元素綁定了一些事件，我們執(zhí)行了相關(guān)操作后，這些事件是否會(huì)被響應(yīng)并執(zhí)行呢，看看下面的代碼：









aa

這段代碼將四種隱藏元素的方法分別展示出來，然后綁定其點(diǎn)擊事件，經(jīng)過測(cè)試，主要有下面的結(jié)論：

display:none:元素徹底消失，很顯然不會(huì)觸發(fā)其點(diǎn)擊事件


visibility:hidden:無法觸發(fā)其點(diǎn)擊事件，有一種說法是display:none是看不見摸不著，而visibility:hidden是看不見摸得著，這種說法是不準(zhǔn)確的，設(shè)置元素的visibility后無法觸發(fā)點(diǎn)擊事件，說明這種方法元素也是消失了，只是依然占據(jù)著頁(yè)面空間


opacity:0:可以觸發(fā)點(diǎn)擊事件，原因也很簡(jiǎn)單，設(shè)置元素透明度為0后，元素只是相對(duì)于人眼不存在而已，對(duì)瀏覽器來說，它還是存在的，所以可以觸發(fā)點(diǎn)擊事件


height:0:將元素的高度設(shè)置為0，并且設(shè)置overflow:hidden。使用這種方法來隱藏元素，是否可以觸發(fā)事件要根據(jù)具體的情況來分析。如果元素設(shè)置了border，padding等屬性不為0，很顯然，頁(yè)面上還是能看到這個(gè)元素的，觸發(fā)元素的點(diǎn)擊事件完全沒有問題。如果全部屬性都設(shè)置為0，很顯然，這個(gè)元素相當(dāng)于消失了，即無法觸發(fā)點(diǎn)擊事件

但是這些結(jié)論真的準(zhǔn)確嗎？
我們?cè)谏厦娴拇a中添加這樣一句代碼：$(".none").click()
結(jié)果發(fā)現(xiàn)，觸發(fā)了click事件，也就是通過JS可以觸發(fā)被設(shè)置為display:none的元素的事件。
所以前面無法觸發(fā)點(diǎn)擊事件的真正原因是鼠標(biāo)無法真正接觸到被設(shè)置成隱藏的元素

CSS3 transition對(duì)這幾種方法的影響

CSS3提供的transition極大地提高了網(wǎng)頁(yè)動(dòng)畫的編寫，但并不是每一種CSS屬性都可以通過transition來進(jìn)行動(dòng)畫的。我們修改代碼如下：









aa

經(jīng)過測(cè)試，可以看到：

display:none:完全不受transition屬性的影響，元素立即消失


visibility：hidden:元素消失的時(shí)間跟transition屬性設(shè)置的時(shí)間一樣，但是沒有動(dòng)畫效果


opacity和height等屬性能夠進(jìn)行正常的動(dòng)畫效果

假設(shè)我們要通過CSS3來做一個(gè)淡出的動(dòng)畫效果，應(yīng)該如下：

.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
.fadeOut:hover { visibility: hidden; opacity: 0; }

應(yīng)該同時(shí)設(shè)置元素的visibility和opacity屬性

總結(jié)說明

本文總結(jié)說明了“隱藏”元素的幾種方式，其中最常用的還是display:none和visibility:hidden。其他的方式只作了解即可，并不推薦使用它們來隱藏元素，它們的真正用途應(yīng)該不在隱藏元素，而是通過了解這些方法的特點(diǎn)，挖掘出其真正的使用場(chǎng)景

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111727.html

相關(guān)文章

  • Css清除浮動(dòng)的方法總結(jié)

    摘要：網(wǎng)頁(yè)布局中經(jīng)常會(huì)用到浮動(dòng)，但是浮動(dòng)的塊級(jí)元素脫離了標(biāo)準(zhǔn)文檔流，使得浮動(dòng)元素的父元素沒有高度，導(dǎo)致父級(jí)元素沒有高度，所以需要清除浮動(dòng)對(duì)父級(jí)元素的影響，本文介紹清除浮動(dòng)的幾種方法。 網(wǎng)頁(yè)布局中經(jīng)常會(huì)用到float浮動(dòng)，但是浮動(dòng)的塊級(jí)元素脫離了標(biāo)準(zhǔn)文檔流，使得浮動(dòng)元素的父元素沒有高度，導(dǎo)致父級(jí)元素沒有高度，所以需要清除浮動(dòng)對(duì)父級(jí)元素的影響，本文介紹清除浮動(dòng)的幾種方法。 清除浮動(dòng)影響的幾種方法...

    LeanCloud 評(píng)論0 收藏0

  • 圖標(biāo)文字對(duì)齊的幾種常見方法

    摘要：總結(jié)關(guān)于使用哪一種方法都是可以選擇的，但是第一種方法希望大家可以認(rèn)真去思考下能收獲很多關(guān)于內(nèi)聯(lián)元素對(duì)齊的知識(shí)。 引言 圖標(biāo)文字對(duì)齊在平時(shí)的工作中是最常見的了，最早學(xué)習(xí)時(shí)候一般都是用vertical-align，但是由于inline-block元素在和文字對(duì)齊時(shí)候的一些很麻煩的表現(xiàn)（見上一篇文章），大家應(yīng)該都經(jīng)歷過那種行框高度高出幾px的情形。簡(jiǎn)單暴力的話還可以用absolute定位方法...

    caige 評(píng)論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對(duì)于所訪問的每個(gè)元素，函數(shù)應(yīng)該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語(yǔ)義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？ 常見的瀏覽器內(nèi)核有哪些？ 介紹一下你對(duì)瀏覽器內(nèi)核的理解？...

    kgbook 評(píng)論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對(duì)于所訪問的每個(gè)元素，函數(shù)應(yīng)該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語(yǔ)義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？ 常見的瀏覽器內(nèi)核有哪些？ 介紹一下你對(duì)瀏覽器內(nèi)核的理解？...

    2json 評(píng)論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對(duì)于所訪問的每個(gè)元素，函數(shù)應(yīng)該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語(yǔ)義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？ 常見的瀏覽器內(nèi)核有哪些？ 介紹一下你對(duì)瀏覽器內(nèi)核的理解？...

    adam1q84 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<