elements_html/css_WEB-ITnose の表示と非表示に関する 9 つのアイデア

× ディレクトリ [1] 表示 [2] 可視性 [3] 非表示 [4] 不透明度 [5] オーバーフロー [6] クリップ [7] 変換 [8] オーバーレイ [9] オフセット

前の単語

In In Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素の表示と非表示に関する 9 つのアイデアを紹介します

アイデア 1: display

要素の表示と非表示については、最も一般的なのは display:none display:block ですが、これを使用すると問題があります。メソッドでは、要素の表示属性は非表示前にブロックであるとは限らず、インライン、インラインブロックなどの場合もあります。

【注意】任意の要素に適用したい場合は、 の表示値を格納する必要があります。要素を事前に

<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>    

アイデア 2: Visibility

Visibility:hidden と display:none は要素を非表示にする 2 つの方法であり、人々によってよく比較されます。実際、違いは非常に単純です。前者はドキュメント フローから切り離されず、要素が占有する物理領域を非表示に保持します。一方、後者はドキュメント フローから切り離され、再表示される場合はページの再描画が必要になります。 。ほとんどの人が言及していないもう 1 つの違いがあります。親が display:none を設定し、子が display:block を設定した場合、親が Visibility:hidden を設定し、子が Visibility:visible を設定すると、子は表示されます。 . 出てきてください

【注意】可視性は遷移属性を適用できます。可視性は離散的なステップであるため、0 ～ 1 の範囲では、0 は非表示を意味し、1 は表示を意味します。可視性:非表示は可視性:0 として表示され、可視性:可視は可視性:1 として表示されます。したがって、可視性アプリケーションの遷移は、0 と 1 の間の遷移効果と同等です。実際、可視性の値が 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>

3 つのアイデア: hidden

HTML には hidden グローバル属性があります。は、非表示要素の表示に特別に使用されます。display:none と似ています。要素が非表示の場合、要素はドキュメント フローから切り離され、JavaScript イベントを受け入れることができません。 [注意] IE7 はサポートしません。IE10 はテストをサポートしません。 .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>    

アイデア 4: 不透明度

要素の表示と非表示について、不透明度も非常に頻繁に使用されます。不透明度の利点は、不透明度が 0 の要素でも、display:none や Visibility:hidden にはない JavaScript イベントを受け入れることができることです。アイデア 5: overflow

CSS には overflow というプロパティがあり、overflow:hidden はオーバーフローの非表示を表します。親の overflow:hidden を親の height:0 または width:0 で使用すると、要素を表示できます

[注意] オーバーフローのある要素が絶対位置の要素とその要素を含むブロックの間に設定されている場合、オーバーフロー属性は無効であること

<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>    

<style>#testWrap{    height: 70px;    transition: height 1s;    overflow: hidden;}</style>

アイデア 6: Clip

CSS のクリップ属性は、clip:rect(top,right,bottom,left) の場合、top>= の場合、通常はあまり使用されません。 Bottom、または left>=right の場合、要素を非表示にすることができます。効果は、visibility:hidden

に似ています。アイデア7:transform

CSS変形transformは、主に移動、回転、拡大縮小、傾きの4つの基本操作をまとめたもので、行列行列を設定することでより複雑な効果も実現できます。要素の可視性効果は、さまざまな変形関数を通じて実現できます

[注意] 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="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>    

【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;">测试内容</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>    

【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 ='scale(1)';}    hide.onclick = function(){    test.style.transform ='scale(0)';}</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>