Ps中那些隱藏的功能，都要靠它們才能完成
在電腦鍵盤上有3個功能鍵，它們是Ctrl、Shift、Alt，除了在Windows系統中起了一定的作用外，三位在其他軟件中也起到了重要作用，尤其是在Pho...
一個div元素隱藏的本質是什麼？這篇就說這個問題
一、隱藏一個元素有哪幾種方法呢？
這個問題好回答，只要是做前端的同學都或多或少能回答，下面列出幾個能立馬想到的方法。
1、常見display:none
將元素設置為display:none後，元素在頁面上將徹底消失，元素本來佔有的空間就會被其他元素佔有，也就是將元素設置display:none後，就會導致瀏覽器的重繪和重排。
2、可以設置visibility:hidden
下面舉一個簡單的例子
上下分別有兩個div，代碼是這樣的：
當上面一個div.toptext設置display:none時，頁面展示出來的效果是這樣的：
結論是下面那個div.text已經往上移了。
當上面一個div.toptext設置visibility:hidden時，頁面展示出來的效果是這樣的：
結論是下面那個div.text並沒有上移。
所以用visibility：hidden來設置元素隱藏時，元素本身還是佔位的，也就是說這種方法適用於那些元素隱藏後不希望頁面佈局發生變化的場景。
3、opacity：0
當div元素設置opacity:0時，同樣元素看不到，但是還是點位的，效果和visibility：hidden一樣。
4、設置屬性為0
這個方法算是技巧吧，將div元素的一些屬性設置值為0，當這個div元素有子元素時，加上overflow：hidden，下面這樣：
二、隱藏之後能點擊嗎？
上面我們通過各種方式可以將一個元素隱藏，這裡我們在來證實一下隱藏的實質，給他們綁定一個點擊事件。
像上面這樣子，然而通過結果，我們發現在只有opacity：0時的div可以觸發點擊事件，原因也很簡單，設置元素透明度為0後，元素只是相對於人眼不存在而已，對瀏覽器來說，它還是存在的，所以可以觸發點擊事件。
display：none無法點擊可以理解，因為元素已經消失了，而visibility：hidden元素無法點擊就說明元素也是消失的，只是依然佔據著頁面空間。最後是height：0元素，如果有子元素設置overflow：hidden也無法點擊，元素相當於消失了。
結論真的是這樣嗎？當我給div.none加一行自動觸發點擊事件時：像下面這樣
$(".none").click()
結果發現控制檯輸出
// none clicked
所以前面無法觸發點擊事件的真正原因是鼠標無法真正接觸到被設置成隱藏的元素（指的是大小）。
三、寫到最後的總結：
隱藏一個div元素也許很簡單，但是知道一個元素隱藏的本質切需要我們花點time去思考，這就是一種玩代碼的樂趣。也能學到東西。
小鄭子每天給你推知識，講完理論後期還有各種前端項目實戰，如果這些對您有益，敬請關注。
相關推薦
'CSS選擇器和優先級總結，告誡自己不能任性使用！important'
"如果在項目裡面使用了通用的reset.css樣式，但是在具體的頁面裡面要對同一個樣式進行覆蓋式修改，不借助與scoped的和inner style，你會怎麼做？會不會像我一樣在剛接觸的時候給要覆蓋的樣式後面加上!important屬性本文將告訴大家關於CSS選擇器和優先級...
'CSS 偽元素基礎知識：before 與after （一）'
"最近因為一些網頁的需要，需要比較深入的使用了CSS 的「偽元素」( Pseudo Element )，發現原來不只是用用before或after 而已，可以玩的東西還真是不少，所以就來篇文章，把這些比較不常玩的用法歸納整理下，希望對你的日常工作有所幫助。什麼是「偽元素」？...
'手機藍牙原來有這麼多隱藏功能！以前不知道，真遺憾'
"相信很多朋友對手機藍牙的印象還停留在多年前文件傳輸的功能上，但其實隨著現在手機科技的不斷髮展，藍牙的功能真的不僅僅只有文件傳輸這麼簡單了，大到涉及我們的出現小到文件傳輸，都是它可以實現的，下面我們就一起來看一下吧。1. 藍牙乘車雖然現在有了二維碼很方便，但是有些共享單車解...
'前端項目迭代發版防止瀏覽器緩存js和css'
"歡迎關注我的頭條號：Wooola，專注於Java、Golang、微服務架構，致力於每天分享原創文章、快樂編碼和開源技術。前言最近發版前端項目，用戶經常反饋新添加功能在線上環境不好用，常出現新老頁面並存的狀況。經前端同事排查法發現，實際上只需要重新刷新一下頁面就沒事了。但是...
'絕地求生：“M16A4”淺談步槍中的隱藏大佬'
"一起Giao遊戲，本篇Giao下M16A4M16A4作為一把元老級的PUBG步槍，可謂經歷了PUBG爆火到衰落的整個過程。這把槍在絕地求生歷屆版本中，一直都不怎麼受玩家待見，其主要原因還是它的連發問題。相較於步槍裡的人氣之王M416在射擊模式中的全自動，M16A4的射擊模...
'吃雞神器不好用？這些“隱藏”功能你都解鎖了嗎？'
"之前給大家介紹了一款電腦玩和平精英、刺激戰場國際服等手遊不用過模擬器檢測就可以匹配手機的手機投屏軟件。部分萌新用過之後反饋說對其功能不瞭解，不知道怎麼用。今天就給大家介紹一下這款神器的一些“神級”功能，用懂了之後你一定會感覺比手搓好用太多了！ TC Games投屏電腦玩手...
推薦中...