元素顯示隱藏的9種思路

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/05/06/5466971.html
-Advertisement-
Play Games

× 目錄 [1]display [2]visibility [3]hidden[4]opacity[5]overflow[6]clip[7]transform[8]覆蓋[9]偏移 前面的話 在網頁製作中，元素的顯示隱藏是非常常見的需求。本文將介紹元素顯示隱藏的9種思路 思路一: display 對於 ...


×
目錄
[1]display [2]visibility [3]hidden[4]opacity[5]overflow[6]clip[7]transform[8]覆蓋[9]偏移

前面的話

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

 

思路一: display

　　對於元素顯隱來說，最常見就是display:none | display:block，但是使用這種方法有個問題，元素的display屬性在隱藏前並不都是block，還有可能是inline、inline-block等

　　[註意]如果要適用於任何元素需要提前儲存元素的display值

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試文字</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" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試文字</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事件

　　[註意]IE7-不支持，IE10-不支持test.hidden='hidden'寫法，只支持test.setAttribute('hidden','hidden')寫法

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試文字</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" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試文字</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" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試內容</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" style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試內容</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" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</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" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</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" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</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 style="background:lightblue;width:100px;height:60px;margin-top: 10px;">測試內容</div>

//滑鼠移入移出會出現元素的顯隱效果

 

思路九: 偏移

　　元素顯示隱藏的另一種常見思路是偏移，將元素移動到視窗範圍外，也可以實現等價的顯隱效果

【1】margin-top

　　利用負margin將元素移出視窗外，要註意的是設置負margin的元素並沒有脫離普通流，後續元素會跟著一起移動

<button id="show">顯示</button>
<button id="hide">隱藏</button>
<div id="test" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</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" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</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" style="background:lightblue;width:100px;height:60px;margin-top: 10px;transition: 0.5s;">測試內容</div>    
<script>
show.onclick = function(){
    test.style.transform ='translate(0,0)';
}    
hide.onclick = function(){
    test.style.transform ='translate(-9999px,-9999px)';
}
</script>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [翻譯] Autoac 最佳實踐和建議
    使用嵌套的 ILifetimeScope 解析服務 Autofac 被設計為跟蹤(track)和清理(dispose)資源。為確保資源被正確處理，務必將長時間運行的應用程式分成小的工作單元 (請求或事務)，服務的解析應在工作單元級別的生命周期範圍中進行。為 asp.net 實現的每個請求一個生命周期 ...
  • Struts2學習筆記（一）
    一、框架概述 1.1 框架的意義與作用： 所謂框架，就是把一些繁瑣的重覆性代碼封裝起來，使程式員在編碼中把更多的經歷放到業務需求的分析和理解上面。特點：封裝了很多細節，程式員在使用的時候會非常簡單。1.2 三大框架：Struts2，Hibernate，Spring1.3 如何學好框架由於框架中細節很 ...
  • SOA 的有力替代和補充
    長久以來，伺服器端的高層架構大體被區分為對立的兩類：SOA（Service-oriented architecture）以及 AIO（All in one）。SOA 將一個完整的應用分割為相互獨立的服務，每個服務提供一個單一標準功能
  • 像寫作一樣編碼-《Clean Code》讀書筆記
    《Clean Code》是一本令人印象深刻的書，它將編碼當成寫作，強調代碼應當像文章一樣清晰準確而不是晦澀難懂。 同時作者給出了操作性很強的編碼建議： ...
  • 設計模式-實踐-工廠模式
    前言 這篇博客的目的是對項目中偶爾碰到的應用設計模式的代碼積累一下。 我認為針對於設計模式的學習，通過看書、看例子只能瞭解概念，而重要的是如何把概念應用到實際的項目開發中。 而且我想提醒大家的是，學習設計模式時，千萬不要拘泥於書上的內容，形成定式思維，這樣對於其他源碼理解會出現一層自然屏障，理解起來 ...
  • 設計模式(九): 從醋溜土豆絲和清炒苦瓜中來學習"模板方法模式"(Template Method Pattern)
    今天是五.四青年節，祝大家節日快樂。看著今天這標題就有食欲，夏天到了，醋溜土豆絲和清炒苦瓜適合夏天吃，好吃不上火。這兩道菜大部分人都應該吃過，特別是醋溜土豆絲，作為“魯菜”的代表作之一更是為大眾所熟知，醋溜土豆絲，好吃不上火。清炒苦瓜這道菜好啊，更是夏天必備之良菜，其功效在此就不做過多贅述了。言歸正 ...
  • 備忘錄模式
    備忘錄：在不破壞封裝的前提下，捕獲一個對象的內部狀態，併在該對象之外保存這個狀態，這樣以後就可將該對象恢復到原先保存的狀態。 舉例如下： Originator:發起人，負責創建一個備忘錄Memento，用以記錄當前時刻它的內部狀態，並可使用備忘錄恢復內部狀態。它根據需要決定Memento存儲Orig ...
  • JS數據類型
    一、Javascript中的數據類型可以分為基本數據類型和複合數據類型兩種: （1）基礎數據類型有5種數據類型：Number、Boolean、Undefined、Null和String。 Number類型：整數和浮點數。NaN：Not a Number。這個數值用於本來要返回一個數值，但是卻未能放回 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類