CSS_html/css_WEB-ITnose で要素を「非表示」にするいくつかの方法の比較

CSS の隠し要素に関して、ほとんどの友人が最初に思いつく方法は、表示をなしに設定することだと思います。これは最もよく知られており、一般的に使用されている方法です。可視性を非表示に設定して要素を非表示にすることを考える人も多いと思いますが、この方法も一般的な方法であり、2 つの違いを知っている人も多いと思います。この 2 つの方法に加えて、この記事では、あまり一般的には使用されないいくつかの方法も要約し、要素を「非表示にする」方法の違い、メリット、デメリットを比較します。 ！

いくつかの方法の簡単な紹介

まず、要素を非表示にするさまざまな方法について説明します。いくつかの方法はよく知られており、いくつかはテクニックと考えられています。

display:none

要素の表示を none に設定することは、要素を非表示にする最も一般的に使用される方法です。

.hide { display:none;}

要素を display:none に設定すると、要素はページ上で完全に消え、要素が元々占めていたスペースが占有されます。これは、ブラウザのリフローと再描画を引き起こすことを意味します。

visibility:hidden

要素の可視性を hidden に設定することも、要素を非表示にする一般的な方法です。display:none との違いは、要素がページから消えた後、スペースが表示されることです。占有している部分は保持されるため、ブラウザは再描画されるだけで、リフローは行われません。

.hidden{    visibility:hidden}

visibility:hidden は、要素が非表示になった後にページ レイアウトを変更したくないシナリオに適しています

opacity: 0

不透明度属性が要素の透明度を表すことは誰もが知っていると思いますが、要素の透明度を 0 に設定すると、その要素もユーザーの目には表示されなくなります。要素。

.transparent { opacity:0;}

このメソッドと Visibility:hidden の共通点の 1 つは、要素が非表示になった後もスペースを占有していることですが、透明度を設定すると、最後に、要素は非表示になるだけで、ページ上にまだ存在します。

高さ、幅などのボックスモデルの属性を 0 に設定します

これは私がまとめたかなり奇妙なテクニックです。簡単に言うと、マージン、ボーダー、パディング、高さ、幅を設定することです。要素のボックス モデルに影響する属性は 0 に設定されます。要素内に子要素またはコンテンツがある場合、その子要素を非表示にするためにその overflow:hidden も設定する必要があります。これは一種のトリックです。 。

.hiddenBox { margin:0; border:0; padding:0; height:0; width:0; overflow:hidden;}

この方法は実用的ではなく、いくつか問題がある可能性があります。ただし、私たちが通常使用する一部のページ効果は、要素の overflow: hidden を設定し、その後 timer 、 margin-bottom 、 border- を通じて要素の高さと margin-top を継続的に設定する jquery の slideUp アニメーションなど、この方法で完成する場合があります。 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>

このコードは、要素を非表示にする 4 つのメソッドをそれぞれ示し、テスト後の主な結論は次のとおりです。

1. display:none: 要素は完全に消え、そのクリック イベントは明らかにトリガーされません。

2. そのクリック イベントはトリガーされません。 display:none は要素が表示されない、またはタッチできないことを意味し、visibility:hidden は要素の可視性を設定した後、クリック イベントがトリガーされないことを意味します。つまり、この方法でも要素はページ領域を占有するだけです。

3. 不透明度: 0: 要素の透明度を 0 に設定すると、その要素が人間の目には存在しないだけです。ブラウザではまだ存在しているため、クリック イベントをトリガーできます

4. height:0: 要素の高さを 0 に設定し、overflow:hidden を設定します。このメソッドを使用して要素を非表示にする場合、イベントをトリガーできるかどうかは特定の状況によって異なります。要素の border、padding、およびその他の属性が 0 以外に設定されている場合、明らかに、要素は引き続きページ上に表示され、要素のクリック イベントのトリガーに問題はありません。すべての属性が 0 に設定されている場合、この要素が消えることは明らかです。つまり、クリック イベントをトリガーできません。

しかし、これらの結論は本当に正確なのでしょうか?

次のコードを上記のコードに追加します。

$(".none").click();

クリック イベントがトリガーされることがわかります。つまり、display:none に設定された要素のイベントは、JS を通じてトリガーできます。したがって、以前にクリック イベントをトリガーできない本当の理由は、非表示に設定されている要素にマウスが実際に触れることができないためです。 ！ ！

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。其他的方式只能算是奇技淫巧，并不推荐使用它们来隐藏元素，它们的真正用途应该不在隐藏元素，而是通过了解这些方法的特点，挖掘出其真正的使用场景。欢迎大家交流！！