三種隱藏 HTML 元素的方式

    HTML中的隱藏技術(shù)

    來(lái)源于:

    https://www.jianshu.com/p/99d9fcde91cb

    在網(wǎng)頁(yè)應(yīng)用中,顯示/隱藏某個(gè)元素或組件是一件經(jīng)常要做的事情,尤其是在目前比較流行的單頁(yè)應(yīng)用中。

    總體而言,有 3 種方式來(lái)實(shí)現(xiàn)

    1. CSS 的 display: none;
    2. CSS 的 visibility: hidden;
    3. HTML5 的 hidden 屬性(boolean)

    它們之間有相同點(diǎn)和不同點(diǎn)。相同點(diǎn)很簡(jiǎn)單,都能使添加了這個(gè)屬性的元素及其子元素『不被看見(jiàn)』。這篇文章著重來(lái)比較一下它們之間的差異。


    display: none;

    添加了這個(gè)屬性的元素:

    • 不占據(jù)頁(yè)面空間(不影響布局),因?yàn)檫@個(gè)屬性不是讓這個(gè)元素『不可見(jiàn)』,而是壓根沒(méi)有把它渲染出來(lái)
    • 依舊可以通過(guò) DOM API 來(lái)獲取到
    • 比如把它變成 display: block;

    visibility: hidden;

    添加了這個(gè)屬性的元素:

    • 仍占據(jù)頁(yè)面空間(影響布局),僅僅讓元素變“透明”,不畫(huà)出來(lái)罷了
    • 依舊可以通過(guò) DOM API 來(lái)獲取到
    • 比如把它變成 visibility: visible;

    HTML5 hidden

    E.g. <p hidden>hello, world!</p>

    添加了這個(gè)屬性的元素:

    • 不占據(jù)頁(yè)面空間(不影響布局),未被渲染出來(lái)
    • 什么情況下使用?
    • 當(dāng)這個(gè)元素和當(dāng)前頁(yè)面狀態(tài)不相關(guān)時(shí)
    • 這個(gè)元素僅僅用來(lái)被頁(yè)面中的其它元素重復(fù)使用,提供某種信息,而非直接展示給用戶使用時(shí)
    • 總之,當(dāng)此元素不應(yīng)該被用戶獲取到時(shí)使用。(因此,不能把此元素鏈接給某個(gè) href 上)
    • 對(duì)比 display: none; 的優(yōu)勢(shì)在于,如果使用 display: none;,想要恢復(fù)顯示時(shí),該恢復(fù)成哪個(gè)值呢?block 嗎?flex 嗎?不好確定。但是使用 HTML5 的 hidden 屬性就不存在這個(gè)問(wèn)題了。
    • 在易用性(Accessibility)方面,標(biāo)注了 hidden 的元素不會(huì)被讀屏器讀到。
    • 由于這個(gè)屬性其實(shí)是用 CSS 實(shí)現(xiàn)的,所以,如果你給帶有 HTML hidden 屬性的元素,添加了 CSS display 屬性,這個(gè) display 屬性會(huì)覆蓋掉 HTML hidden 屬性。
    • 有英文閱讀能力的同學(xué)可以去 W3C文檔 查看更詳細(xì)的解釋和用例

    文檔上摘取的用例之一:

    <h1>The Example Game</h1>
    <section><h2>Login</h2><form>
        ...
        <!-- 調(diào)用 login() 當(dāng)用戶的身份被成功檢測(cè)時(shí) --></form><script>function login() {
          // switch screensdocument.getElementById('login').hidden = true;
          document.getElementById('game').hidden = false;
        }
      </script>
    </section>
    <section hidden>
      ...
    </section>
    

    總結(jié)

    每種用法都有自己的優(yōu)勢(shì)和劣勢(shì),需要根據(jù)具體的業(yè)務(wù)場(chǎng)景來(lái)選擇用哪一種方式。

    如有錯(cuò)誤或遺漏,歡迎指出,謝謝!

    作者:Wenliang

    鏈接:https://www.jianshu.com/p/99d9fcde91cb

    插件

    Wenprise Pinyin Slug - 轉(zhuǎn)換中文為漢語(yǔ)拼音或英文翻譯

    2020-2-24 16:39:11

    隨記

    VIM的使用

    2018-7-9 19:37:22

    ??
    Npcink上的部份代碼及教程來(lái)源于互聯(lián)網(wǎng),僅供網(wǎng)友學(xué)習(xí)交流,若您喜歡本文可附上原文鏈接隨意轉(zhuǎn)載。
    無(wú)意侵害您的權(quán)益,請(qǐng)發(fā)送郵件至 1355471563#qq.com 或點(diǎn)擊右側(cè) 私信:Muze 反饋,我們將盡快處理。
    0 條回復(fù) A文章作者 M管理員
      暫無(wú)討論,說(shuō)說(shuō)你的看法吧
    ?
    個(gè)人中心
    購(gòu)物車
    優(yōu)惠劵
    今日簽到
    有新私信 私信列表
    搜索
    主站蜘蛛池模板: 激情内射日本一区二区三区| 国产亚洲福利一区二区免费看| 中文字幕精品亚洲无线码一区应用 | 无码一区二区三区免费视频| 色欲AV无码一区二区三区| 国产精品一区二区综合| 亚洲视频一区网站| 日韩精品人妻一区二区中文八零| 成人丝袜激情一区二区| 国产伦精品一区二区三区女| 午夜福利一区二区三区在线观看| 午夜精品一区二区三区在线视| 中文字幕乱码亚洲精品一区 | 国产a久久精品一区二区三区| 精品国产福利一区二区| 一本AV高清一区二区三区| 精品人妻少妇一区二区| 一区二区三区四区在线观看视频| 国产av夜夜欢一区二区三区| 中文无码一区二区不卡αv | 国产成人高清亚洲一区91| 蜜桃AV抽搐高潮一区二区| 亚洲国产精品一区二区久久hs| 精品一区二区三区高清免费观看 | 亚洲福利视频一区| 无码人妻一区二区三区免费看| 国产美女视频一区| 痴汉中文字幕视频一区| 亚洲日本一区二区一本一道| 一区二区三区AV高清免费波多| 日韩免费视频一区| 中文字幕亚洲综合精品一区| 亚洲一区二区观看播放| 爆乳无码AV一区二区三区 | 人妖在线精品一区二区三区| 亚洲一区二区三区在线观看蜜桃| 97se色综合一区二区二区| 欧美日韩国产免费一区二区三区| 国产精品免费视频一区| 一区二区三区免费高清视频| 精品乱人伦一区二区三区|