整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          在 CSS 中隱藏元素的 10 種方法

          CSS中很多隱藏元素的方法,但這些方法的可訪問性、布局、動畫、性能和事件處理的方式有所不同。

          • 動畫: 一些CSS隱藏元素的方法一般是全有或者全無,元素要么是完全可見,要么是完全不可見,并且沒有中間狀態。其他的,比如透明度,可以是一個范圍的值,所以在這中間過程插入動畫成為可能;
          • 可訪問性: 下面的每一種方法都會在視覺上隱藏一個元素,但不一樣會真正的去除DOM元素。有一些方式隱藏元素后,屏幕閱讀器仍然能讀取到元素內容;
          • 事件處理: 隱藏元素之后,有些方式元素上的事件仍然能被觸發,而有些方式就會導致元素上的事件觸發無效;
          • 表現: 瀏覽器加載并解析 HTML DOM 和 CSS 對象模型后,頁面將分三個階段呈現:布局(生成每個元素的幾何位置)、繪制(繪制每個元素的像素)、組合(以適當的順序放置元素層)。僅導致構圖變化的效果明顯比影響布局的效果更好。在某些情況下,瀏覽器還可以使用硬件加速。

          下面就來看看CSS中隱藏元素的方式,以及每種方式的優缺點。

          1. opacity 和 filter: opacity()

          opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數字,或者 0% 和 100% 之間的百分比,對應地表示完全透明和完全不透明。

          • opacity: N:該屬性用來設置元素的透明度;
          • filter: opacity(N) :filter屬性用來設置元素的濾鏡,opacity是濾鏡重的透明度,用來設置元素的透明度。
          div {
              opacity: 0;
          }
          
          div {
              filter: opacity(0%);
          }
          復制代碼

          在現代瀏覽器中,這兩者之間幾乎沒有實際的區別,但如果同時應用多種效果(模糊、對比度、灰度等)時,應該使用 filter 屬性。

          注意:opacity 可以設置動畫并提供出色的性能,但頁面上保留完全透明的元素可能會觸發事件。



          2. color alpha 透明度

          可以將元素的color、background-color 和 border-color 等屬性設置為rgba(0,0,0,0),這樣就會使元素完全透明:

          div {
          	color: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
          }
          復制代碼

          這三個屬性都是支持設置動畫效果的,需要注意,透明度不能應用于帶有背景圖片的元素,除非它們是使用 linear-gradient 或類似方法生成的。

          Alpha 通道可以設置為:

          • transparent:完全透明(中間不能插入動畫);
          • rgba(r, g, b, a):紅色、綠色、藍色和 alpha;
          • hsla(h, s, l, a):色相、飽和度、亮度和 alpha;
          • #RRGGBBAA 或 #RGBA。

          3. transform

          transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏:

          div {
          	transform: scale(0);
          }
          
          div {
          	translate(-9999px, 0px)
          }
          復制代碼

          transform 屬性提供了出色的性能和硬件加速,因為元素被有效地移動到了單獨的層中,并且可以在 2D 或 3D 中進行動畫處理。原始的布局空間會保持原樣,并不會受影響。使用這種方式隱藏的元素不會觸發任何事件。



          4. clip-path

          clip-path 屬性可以創建一個剪輯區域,用于確定元素的哪些部分是可見的。使用 clip-path: circle(0) 可以將元素進行隱藏。

          div {
          	clip-path: circle(0);
          }
          復制代碼

          clip-path為添加動畫效果提供了空間,不過它只能在現代瀏覽器中使用。



          5. visibility: hidden

          visibility 屬性可以設置為 visible 或 hidden 來顯示和隱藏元素。

          div {
          	visibility: hidden;
          }
          復制代碼

          除非使用collapse值,否則元素使用的空間保持不變。


          6. display: none

          display 可能是最常用的元素隱藏方法; 。當其值為 none 時元素就隱藏了。被隱藏的元素不會在頁面中占據位置,也不會響應綁定的監聽事件。

          div {
            display: none;
          }
          復制代碼

          然而,在大多數情況下,display 可能是最糟糕的 CSS 屬性。除非使用 position:absolute 將元素移出文檔流,或者采用contain屬性,否則它的隱藏過程無法設置動畫,并將觸發頁面重新布局。



          7. z-index

          可以通過將元素的 z-index 屬性設置為負值,以實現元素的隱藏。這實際上就是將元素放在了我們看不到的層。

          div {
            z-index: -1;
          }
          復制代碼


          8. position

          position屬性允許使用top、bottom、left、right 從頁面中的默認位置移動元素。因此,絕對定位的元素可以通過左鍵:-9999px 等值移出屏幕:

          div {
            position: absolute;
            left: -999px;
          }
          復制代碼



          9. 覆蓋另一個元素

          通過在元素的上面放置與背景顏色相同的元素,可以在視覺上隱藏一個元素。下面來使用::after偽元素來實現:

          div::after {
            position: absolute;
            content: '';
            top: 0;
            bottom: 100%;
            left: 0;
            right: 0;
            background-color: #fff;
          }
          復制代碼

          雖然這從技術上講是可以實現的,但是這樣做需要更多的代碼。



          10. 縮小尺寸

          可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實現元素的隱藏。可能還需要應用 overflow: hidden; 來確保內容不會溢出。

          div {
            height: 0;
            padding: 0;
            overflow: hidden;
          }
          復制代碼

          使用這種形式我們可以在隱藏過程中使用動畫效果,并且他的性能會比 transform 好很多。


          分類:

          頁編程之圖片、隱藏。

          同學們好,這里是免費少兒編程知識分享,每天一行代碼誰都能學會。今天分享的知識是為網頁添加圖片控件和隱藏控件,用到的是input標簽的type屬性值,image和hidden。這兩個控件太過于簡單,所以我就放在一起講了,同時介紹了image控件button的image內容,以及IMG控件之間的區別。演示了hidden控件在實際編程中的作用。

          先來看看今天實例的運行效果。網頁上分為兩段。

          ·第一段中有三張圖片,第一張就是type屬性等于image的效果,第二張是button中包含IMG標簽的效果,第三張是純IMG標簽的效果。這三張圖片的共同點是圖片完全一致。不同點是type=image,直接將整張圖片做成了提交按鈕,點擊之后即可提交整張表單,但外觀表現時仍然和普通的圖片是沒有任何差別的。

          ·第二張是button按鈕中使用了IMG標簽,雖然它也有提交和圖片,但是它最外面仍然保留了按鈕的外邊框,看上去是以按鈕為主。

          ·第三章中直接使用IMG標簽,它沒有提交功能就是一普通的圖片,但是我們仍然可以通過JS的submit函數來使其提交表單。

          ·第二段是一個密碼框一個提交按鈕。這一句話只是為了方便你們找到隱藏空間的位置,我還做了兩個hidden的隱藏控件,但是你們看不到,我隨便在這里輸入密碼,然后點擊按鈕時,JS就會取出(密碼)控件的值和隱藏控件中的值并且彈出對話框提示。

          這里有兩點需要注意,可以看到密碼控件中的值在這里仍然是明文顯示的,證明它只是視覺上是*或者圓點,實際在數據傳輸中仍然是明文并沒有加密。

          ·第二點是隱藏控件中的值被成功讀取,看不到并不代表不存在,效果各位同學都已經看到了。

          在我們來看看實現的代碼,先講image值,它的關鍵屬性就是src和ID,也就是引用地址和命名,沒有什么好講的。我其實是不建議你們使用這個控件的,因為一般表單提交前,都會加上一層一層的驗證,比如說是必填、b7手勢、數字、格式是否正確。這個時候除了最基礎的控件類型驗證外還會用到 gs驗證。而如果使用 gs驗證就需要用到自定義函數,在提交到服務器前就驗證好。

          如果用戶數據是正確的就提交,如果不正確就終止提交操作提示用戶修改流程,這樣看上去沒有問題,但因image控件討厭也就討厭在這里。

          ·若用這種方式提交可能會發生表單提交兩次的現象,經常會造成表單元素被重復提交,數據庫被寫入異常,所以盡量不用或者少用。

          ·至于hidden控件常用來保存一些不需要或者不希望展示給用戶的數據,他的常用屬性就是無這個Value和這個id。

          我舉個例子幫助你們理解,現在客戶要求建立一個注冊新用戶的界面,但是要求將注冊步驟分為兩步。第一步,需要用戶填寫手機和昵稱,然后跳轉至第二頁,輸入密碼和其他的信息,第二頁肯定就不需要顯示出來用戶在第一頁的時候輸入的數據了。但這些數據又必須在第二頁的時候一起提交至服務器。

          這時候就可以使用到隱藏控件--接收第一頁提交過來的數據并且不顯示,用戶也感受不到。直接填好信息提交時第一頁的數據也以隱藏空間的方式一起提交了。這僅僅是hidde空間的一個使用場景,還可以收集用戶信息、確定用戶身份、判斷提交源,在多個form表單中建立關節聯、做全局變量等,總的來說應用方式還是很廣的。

          在目前這個階段就只需要知道這兩控件能干什么和基礎寫法,計算完成后面到具體的使用場景時會再詳細講解。

          好了,今天的分享就到這里,希望各位同學下去能夠照著寫三遍,做到不看視頻也能夠寫出來,所有的案例及相關文檔均可以向我獲取。下期見。網頁編程·服務端編程·數據庫·算法,點贊點關注吧!

          Web 開發中出于多種原因,我們需要隱藏元素。例如,一個按鈕應該在移動中可見,而在桌面視口中隱藏。或者,在移動設備上隱藏但要在桌面上顯示的導航元素。隱藏元素時有三種不同的狀態:

          • 元素完全隱藏并從文檔流中刪除。
          • 元素只是隱藏在視覺上,而且仍然可以被輔助技術(AT)訪問,比如屏幕閱讀器。
          • 元素是可見的,但僅對屏幕閱讀器隱藏。

          在這篇文章中,我們將學習在html和css中隱藏元素,并涵蓋易訪問性、動畫和隱藏用例等方面,讓我們開始吧。

          HTML5 隱藏屬性

          它是一個布爾 HTML 屬性,隱藏了附加到它的元素。當瀏覽器加載一個web頁面時,它不會渲染帶有hidden屬性的元素,除非該元素被CSS手動覆蓋,這與應用display: none的效果類似。

          考慮下面的例子:

          我們有一個title、一個figure和一個描述。只有當視口寬度大于400px時,才會顯示該圖。我向元素添加了hidden`屬性。

          在CSS中,我使用hidden屬性僅在所需的視口大小中顯示元素。

          img[hidden] {
            display: none;
          }
          
          @media (min-width: 400px) {
            img[hidden] {
              display: block;
            }
          }

          事例源碼:https://codepen.io/shadeed/pen/373c8a132e5d72201b935689d6990d16?editors=1100

          那么,你可能會問為什么不使用display: none呢?這是個好問題。當通過其hidden屬性調用圖像選擇器時,我們可以確定即使CSS因為某種原因沒有加載,元素也會被隱藏。

          可訪問性對hidden的影響

          從可訪問性的角度來看,hidden將元素完全隱藏在web頁面之外,因此屏幕閱讀器無法訪問它。一定要避免使用它來隱藏僅用于表示目的的元素。

          CSS display 屬性

          每個元素都有一個默認的display值,比如inline-block、block、table等等。要隱藏具有display屬性的元素,我們應該使用display: none。當一個元素使用display: none隱藏時,它的所有后代都將被刪除。

          考慮下面的例子:

          img {
            display: none;
          }
          
          @media (min-width: 400px) {
            img {
              display: block;
            }
          }

          這將完全隱藏文檔流和屏幕閱讀器中的圖像。也許你想知道文檔流是什么?請參見下圖:

          注意,當藍皮書被隱藏時,它已被完全從堆棧中刪除。為它保留的空間已經消失了。同樣的概念也適用于在HTML中隱藏元素時。元素的預留空間已經沒有了,它更改了文檔流,或者在我們的示例中,更改了圖書流堆棧。

          下面是一個動畫,演示當移除書本時發生的情況:

          如果資源隱藏在CSS中,它們會加載嗎?

          是的,會的。例如,如果<image>被CSS隱藏,并且我們在某個斷點處顯示它,則它已經被加載。即使圖片被CSS隱藏,該圖片也會引起HTTP請求。

          在下面的演示中,我只添加了一個圖像,并使用CSS隱藏它。然后,我打開「DevTools」并檢查networks選項卡,它顯示圖像已加載。

          稍后我們將對此進行討論,以解釋如何在特定斷點或視口大小中不需要HTTP請求時減少HTTP請求。

          style 元素

          值得一提的是,有些元素的默認值是display: none。可以將<style>元素添加到HTML頁面中,我們可以將其display屬性更改為block,這樣就可以看到它了。

          「html」

          <body>
              <style>
                 .title { color: #000; }
              </style>
          </body>

          「css」

          style {
              display: block;
          }

          如果您希望樣式塊始終可見且可編輯,這是非常有用的。可以通過向style標簽添加屬性contentteditable =true來編輯它。

          事例:https://codepen.io/shadeed/pen/3c1e8d7d69bcf03aa875e3e50d0ffe02?editors=1100

          可訪問性對display: none的影響

          使用display:none時,它將對屏幕閱讀器完全隱藏。

          Opacity

          通過將opacity度設置為0,該元素及其所有后代將被隱藏,并且不會被繼承, 但是,它僅從視覺角度隱藏它們。除此之外,opacity值為1以外的元素將創建一個新的堆疊上下文。

          在上圖中,藍皮書僅在視覺上隱藏。與使用display: none時發生的情況相比,它的空間仍然保留,并且堆棧順序沒有變化。

          img {
              opacity: 0;
          }

          根據最初的示例,如果我們要隱藏不透明的圖像,結果將如下所示:

          該圖像仍然存在,并且已保留其空間。它僅從視覺角度隱藏。

          更新:2020年1月13日

          Dusan Milovanovic指出,pointer-events: none | auto可以用來禁用opacity為0的隱藏元素上的鼠標事件。這一點很重要,因為用戶可能會對單擊、懸停或選擇隱藏元素的文本感到困惑。

          事例:https://codepen.io/shadeed/pen/4900ddd4a4d324cc531c1980088f775a?editors=1100

          可訪問性對opacity: 0的影響

          一個元素以opacity: 0仍然可以被屏幕閱讀器訪問,并且可以用鍵盤進行聚焦。

          Visibility

          通過使用visibility: hidden,我們可以顯示或隱藏類似于使用opacity: 0的元素,而不會影響文檔的視覺流。

          請注意,藍皮書是如何從可視流中隱藏的,但是它并沒有影響圖書堆棧的順序。

          當在父元素上使用visibility: hidden時,所有內容都是隱藏的,但是當該父元素的子元素具有visibility: visible時,將顯示該子元素。

          「html」

          <article>
            <h1>Spring is on the way</h1>
            <img src="landscape.jpg" alt="">
            <p><!-- Desc --></p>
          </article>

          「CSS」

          article {
              visibility: hidden;
          }
          
          img {
              visibility: visible;
          }


          在上面的例子中,<article>元素具有visibility: hidden。但是,添加visibility: visible可以讓圖片顯示。同樣,這是因為visibility應用于元素的后代,但是可以從具有該元素的子元素重寫它。

          事例源碼:https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

          可訪問性對visibility: hidden的影響

          該元素被隱藏,其后代將從可訪問性樹中刪除,并且屏幕閱讀器不會渲染該元素。

          Positioning

          要隱藏帶有position屬性的元素,我們應該將它移到屏幕外,并將其大小設置為0(寬度和高度)。個例子就是跳轉導航鏈接。考慮下面的圖:

          要將鏈接放置在屏幕之外,我們應該添加以下內容

          「css」

          .skip-link {
              position: absolute;
              top: -100%;
          }

          值-100%將推動元素100%的視口高度。結果,它將被完全隱藏。一旦它聚焦在鍵盤上,它就會像這樣顯示出來

          .skip-link:focus {
              position: absolute;
              top: 0;
          }

          事例源碼:https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

          可訪問性對position: absolute | fixed的影響

          屏幕閱讀器可訪問該元素,并且鍵盤可聚焦。它只是從視口中隱藏起來。

          Clip Path

          當在元素上使用clip-path時,它創建一個裁剪區域,該區域定義應該顯示和隱藏哪些部分。

          在上面的例子中,透明的黑色區域有clip-path。當clip-path應用于元素時,透明黑色區域下的任何內容都不會顯示。

          為了更直觀地演示以上內容,我將使用clippy工具。在下面的GIF中,我有如下的clip-path:

          將每個方向的多邊形值設置為0 0,則裁剪區域的大小將調整為0。結果,圖像將不會顯示。同樣,這也可以用一個圓來代替多邊形:

          img {
              clip-path: circle(0 at 50% 50%);
          }


          可訪問性對clip-path的影響

          元素僅在視覺上隱藏, 屏幕閱讀器和鍵盤焦點仍然可以使用它。

          事例源碼:https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

          控制顏色和字體大小

          雖然這兩種技術不像我們前面討論的那樣常見,但它們可能對某些用例有用。

          顏色透明

          通過使文本的顏色透明,它將隱藏在視覺上。這對于只有圖標的按鈕非常有用。

          字體大小

          此外,將字體大小設置為0也很有用,因為這會在視覺上隱藏文本。考慮下面的示例,其中有一個具有以下結構的按鈕:

          我們的目標是以可訪問的方式隱藏文本。為此,我添加了以下CSS

          .button span {
              color: transparent;
              font-size: 0;
          }

          這樣,文本就被隱藏了。它甚至可以在不更改顏色的情況下工作,但是我出于解釋目的添加了它。

          事例源碼:https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

          Aria Hidden

          當向元素添加aria-hidden屬性時,它將從可訪問性樹中刪除該元素,這可以增強屏幕閱讀器用戶的體驗。注意,它并沒有在視覺上隱藏元素,它只針對屏幕閱讀器用戶。

          <button>
              Menu
              <svg aria-hidden="true"><!-- --></svg>
          </button>

          在上面的例子中,我們有一個帶有標簽和圖標的菜單按鈕。為了向屏幕閱讀器隱藏圖標,添加了aria-hidden。

          根據Mozilla Developer Network (MDN),下面是屬性的用例

          • 隱藏裝飾性的內容,如圖標、圖像。
          • 隱藏復制文本。
          • 隱藏屏幕外或折疊的內容。

          可訪問性對aria-hidden="true"的影響

          是為屏幕閱讀器設計的,因為它只對屏幕閱讀器隱藏內容。然而,內容對于有視力的用戶仍然是可見的,并且鍵盤是可聚焦的。

          動畫與互動

          當我們想讓一個隱藏的元素動起來時,例如,顯示隱藏的移動導航,它需要以一種可訪問的方式來完成。為了獲得一種可訪問的體驗,我們將探索一些值得學習的好例子,以及一些不好的例子,以避免犯可能會給屏幕閱讀器用戶帶來不好體驗的錯誤。

          #### 菜單動畫-不好的例子

          我們有一個菜單,在展開時需要有滑動動畫。最簡單的方法是在菜單中添加以下內容:

          ul {
              opacity: 0;
              transform: translateX(100%);
              transition: 0.3s ease-out;
          }
          
          ul.active {
              opacity: 1;
              transform: translateX(0);
          }

          有了上述內容,菜單將根據.active類展開和折疊,該類將通過 JavaScript 如下添加:

          menuToggle.addEventListener('click', function(e){
            e.preventDefault();
            navMenu.classList.toggle('active');
          });

          結果可能看起來不錯,但它有一個很大的錯誤。使用opacity: 0不會隱藏可訪問性樹的導航。即使導航在視覺上是隱藏的,它仍然可以通過鍵盤聚焦,并且可以被屏幕閱讀器訪問。必須將其隱藏以避免混淆用戶。

          下面是來自Chrome開發工具的 accessibility tree 的截圖:

          簡而言之,accessibility tree是屏幕閱讀器用戶可以訪問的所有內容的列表。在我們的例子中,導航列表在那里,而它在視覺上是隱藏的。我們需要解決兩個問題:

          1.菜單隱藏時避免用鍵盤聚焦 2.當導航隱藏時,避免通過屏幕閱讀器告知導航

          下面的屏幕截圖顯示了Mac OS上的VoiceOver轉子是如何看到頁面的。導航列表在那里,而它是隱藏的

          事例源碼:https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

          菜單動畫-好的例子

          為了修正這個錯誤,我們需要使用visibility: hidden作為導航菜單。這將確保菜單是隱藏的視覺和屏幕閱讀器。

          「css」


          添加后,菜單將從屏幕閱讀器中隱藏。讓我們再次測試,看看VoiceOver將顯示什么:

          事例源碼:https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

          自定義復選框

          默認的復選框設計很難自定義,因此,我們需要為復選框創建自定義設計。讓我們看看基本的 HTML:

          要自定義復選框,我們需要以一種可訪問的方式隱藏輸入。為此,應該使用position和其他屬性。有一個常見的CSS類,稱為sr-only或visual -hidden,它只在視覺上隱藏一個元素,并讓鍵盤和屏幕閱讀器用戶可以訪問它。

          事例源碼:https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

          ### 隱藏按鈕

          在Twitter上,有一個名為“查看新推文”(See New Tweets)的按鈕,對于帶有aria-hidden內容的屏幕閱讀器來說是隱藏的,只有在有新推文可用時才會顯示出來。


          作者:Ahmad shaded 譯者:前端小智 來源:sitepoint

          原文:https://www.sitepoint.com/hide-elements-in-css/


          主站蜘蛛池模板: 国产精品香蕉一区二区三区| 无码人妻久久一区二区三区 | 国产精品一区视频| 成人精品一区二区三区中文字幕| 精品少妇人妻AV一区二区| 视频精品一区二区三区| 日韩免费视频一区二区| 无码喷水一区二区浪潮AV| 国产色综合一区二区三区| 亚洲一区二区三区高清在线观看| 国产SUV精品一区二区88| 亚洲V无码一区二区三区四区观看| 一本一道波多野结衣AV一区| 精品国产AⅤ一区二区三区4区 | 国产裸体歌舞一区二区| 欧美日韩综合一区二区三区| 97久久精品午夜一区二区 | 精品一区二区三区电影| 天堂va在线高清一区| 综合人妻久久一区二区精品| 国产伦精品一区二区三区免.费| 在线播放国产一区二区三区| 国产丝袜无码一区二区三区视频| 无码人妻一区二区三区兔费| 亚洲一区二区三区高清视频| 亲子乱AV视频一区二区| 国产波霸爆乳一区二区| 一区二区三区中文| 国产成人一区二区三区在线| 精品一区二区三区视频| 国产色精品vr一区区三区| 日韩精品人妻av一区二区三区| 日韩在线观看一区二区三区| 中文字幕一区二区在线播放 | 亚洲狠狠狠一区二区三区| 日韩人妻一区二区三区蜜桃视频| 久久精品一区二区东京热| 国产美女在线一区二区三区| 无码人妻aⅴ一区二区三区有奶水| 亚洲av无码一区二区三区人妖| 亚洲午夜精品一区二区麻豆 |