CSS“隐藏”元素的几种方法的对比_html/css_WEB-ITnose
一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none。这是最为人所熟知也是最常用的方法。我相信还有不少人想到使用设置visibility为hidden来隐藏元素,这种方式也是常用的方法,而且也有很多人知道两者的不同。除了这两种方法,本文还总结了一些比较不常用的方法,比较了这几种“隐藏”元素方法的区别和优缺点,欢迎大家交流!!
几种方法的简单介绍
首先我们分别来说说到底有哪几种隐藏元素的方法,有一些方法是众所周知的,还有一些算是一种技巧。
display:none
设置元素的display为none是最常用的隐藏元素的方法。
.hide { display:none;}
将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。
visibility:hidden
设置元素的visibility为hidden也是一种常用的隐藏元素的方法,和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。
.hidden{ visibility:hidden}
visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景
opacity:0
opacity属性我相信大家都知道表示元素的透明度,而将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方法。
.transparent { opacity:0;}
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中。
设置height,width等盒模型属性为0
这是我总结的一种比较奇葩的技巧,简单说就是将元素的margin,border,padding,height和width等影响元素盒模型的属性设置成0,如果元素内有子元素或内容,还应该设置其overflow:hidden来隐藏其子元素,这算是一种奇技淫巧。
.hiddenBox { margin:0; border:0; padding:0; height:0; width:0; overflow:hidden;}
这种方式既不实用,也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的,比如jquery的slideUp动画,它就是设置元素的overflow:hidden后,接着通过定时器,不断地设置元素的height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom为0,从而达到slideUp的效果。
元素隐藏后的事件响应
如果被隐藏的元素绑定了一些事件,我们执行了相关操作后,这些事件是否会被响应并执行呢,看看下面的代码:
<style> div { width: 100px; height: 100px; background: red; margin: 15px; padding: 10px; border: 5px solid green; display: inline-block; overflow: hidden; } .none { display: none; } .hidden { visibility: hidden; } .opacity0 { opacity: 0; } .height0 { height: 0; } </style> <div class="none"></div><div class="hidden"></div><div class="opacity0"></div><div class="height0">aa</div> <script src="/Scripts/jquery-1.10.2.min.js"></script><script> $(".none").on("click", function () { console.log("none clicked"); }) $(".hidden").on("click", function () { console.log("hidden clicked"); }) $(".opacity0").on("click", function () { console.log("opacity0 clicked"); }) $(".height0").on("click", function () { console.log("height0 clicked"); })</script>
这段代码将四种隐藏元素的方法分别展示出来,然后绑定其点击事件,经过测试,主要有下面的结论:
1、display:none:元素彻底消失,很显然不会触发其点击事件
2、visibility:hidden:无法触发其点击事件,有一种说法是display:none是元素看不见摸不着,而visibility:hidden是看不见摸得着,这种说法是不准确的,设置元素的visibility后无法触发点击事件,说明这种方法元素也是消失了,只是依然占据着页面空间。
3、opacity:0:可以触发点击事件,原因也很简单,设置元素透明度为0后,元素只是相对于人眼不存在而已,对浏览器来说,它还是存在的,所以可以触发点击事件
4、height:0:将元素的高度设置为0,并且设置overflow:hidden。使用这种方法来隐藏元素,是否可以触发事件要根据具体的情况来分析。如果元素设置了border,padding等属性不为0,很显然,页面上还是能看到这个元素的,触发元素的点击事件完全没有问题。如果全部属性都设置为0,很显然,这个元素相当于消失了,即无法触发点击事件。
但是这些结论真的准确吗?
我们在上面的代码中添加这样一句代码:
$(".none").click();
结果发现,触发了click事件,也就是通过JS可以触发被设置为display:none的元素的事件。所以前面无法触发点击事件的真正原因是鼠标无法真正接触到被设置成隐藏的元素!!!
CSS3 transition对这几种方法的影响
CSS3提供的transition极大地提高了网页动画的编写,但并不是每一种CSS属性都可以通过transition来进行动画的。我们修改代码如下:
<style> div { width: 100px; height: 100px; background: red; margin: 15px; padding: 10px; border: 5px solid green; display: inline-block; overflow: hidden; transition: all linear 2s; } .none { display: none; } .hidden { visibility: hidden; } .opacity0 { opacity: 0; } .height0 { height: 0; } </style> <div class="none"></div><div class="hidden"></div><div class="opacity0"></div><div class="height0">aa</div> <script src="/Scripts/jquery-1.10.2.min.js"></script><script>$(".none").on("click", function () { console.log("none clicked"); $(this).css("display", "none");})$(".hidden").on("click", function () { console.log("hidden clicked"); $(this).css("visibility", "hidden");})$(".opacity0").on("click", function () { console.log("opacity0 clicked"); $(this).css("opacity", 0);})$(".height0").on("click", function () { console.log("height0 clicked"); $(this).css({ "height": 0, });})</script>
经过测试,可以看到:
1、display:none:完全不受transition属性的影响,元素立即消失
2、visibility:hidden:元素消失的时间跟transition属性设置的时间一样,但是没有动画效果
3、opacity和height等属性能够进行正常的动画效果
假设我们要通过CSS3来做一个淡出的动画效果,应该如下:
.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; } .fadeOut:hover { visibility: hidden; opacity: 0; }
应该同时设置元素的visibility和opacity属性。
总结说明
本文总结说明了“隐藏”元素的几种方式,其中最常用的还是display:none和visibility:hidden。其他的方式只能算是奇技淫巧,并不推荐使用它们来隐藏元素,它们的真正用途应该不在隐藏元素,而是通过了解这些方法的特点,挖掘出其真正的使用场景。欢迎大家交流!!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。
