CSS 要素を表示および非表示にする 9 つの方法

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

画面

要素を表示または非表示にする最も一般的な方法は、display:none | display:block です。ただし、この方法には問題があります。要素の表示属性は、非表示になる前は必ずしも block であるとは限りません。inline、inline-block などの場合もあります。

注意: 任意の要素に適用する場合は、事前に要素の表示値を保存する必要があります。

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="test">テストテキスト</div>

<スクリプト>
show.onclick = 関数(){
    test.style.display = 'ブロック';
}    
非表示.onclick = 関数(){
    test.style.display = 'なし';
}
</スクリプト>

可視性

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

注: 可視性には遷移属性を適用できます。可視性は 0 から 1 の範囲内の離散的なステップであるため、0 は非表示、1 は表示を意味します。 visibility:hidden は visibility:0 として表示され、 visibility:visible は visibility:1 として表示されます。したがって、トランジションを適用する可視性は、0 と 1 の間のトランジション効果と同等になります。実際、可視性の値が 0 より大きい限り、表示されます。この現象を利用して、トランジションを使用して要素の表示と非表示を遅らせることができます。

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="test">テストテキスト</div>

<スクリプト>
show.onclick = 関数(){
    test.style.transition = 'なし';
    test.style.visibility = '可視';
}    
非表示.onclick = 関数(){
    test.style.transition = '可視性 0.2秒 0.5秒';
    test.style.visibility = 'hidden';
}
</スクリプト>

隠れた

あまり馴染みのない方もいるかもしれません。HTML には hidden グローバル属性があり、これは特に非表示の要素を表示するために使用されます。これは display:none に似ています。要素が非表示になると、ドキュメントフローから外れ、JavaScript イベントを受信できなくなります。

注: IE10 は test.hidden='hidden' メソッドをサポートしておらず、test.setAttribute('hidden','hidden') メソッドのみをサポートしています。

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="test">テストテキスト</div>

<スクリプト>
show.onclick = 関数(){
    テストの属性を削除します('hidden');
    /*テスト.hidden = '';*/
}    
非表示.onclick = 関数(){
    テスト属性を設定します('hidden','hidden');
    /*test.hidden = 'hidden';*/
}
</スクリプト>

不透明度

不透明度は、要素を表示または非表示にするためにも頻繁に使用されます。不透明度の利点は、不透明度が 0 の要素でも JavaScript イベントを受信できることです。これは、display:none および visibility:hidden では利用できません。

<button id="show">表示</button>
<button id="hide">非表示</button>
<button id="reset">リセット</button>
<div id="test">テストテキスト</div>

<スクリプト>
show.onclick = 関数(){
    test.style.transition = 'なし';
    test.style.opacity = '1';
}    
非表示.onclick = 関数(){
    test.style.transition = '不透明度 0.2 秒';
    test.style.opacity = '0';
}
test.onclick = 関数(){
    this.style.width = '200px';
}
reset.onclick = 関数(){
    履歴.go();
}
</スクリプト>

オーバーフロー

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

注意: オーバーフローのある要素が絶対位置の要素とその包含ブロックの間にある場合、オーバーフロープロパティは無効になります。

<スタイル>
#テストラップ{
    高さ: 70px;
    遷移: 高さ 1 秒;
    オーバーフロー: 非表示;
}
</スタイル>

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="testWrap">
    <div id="test">テストコンテンツ</div>        
</div>

<スクリプト>
show.onclick = 関数(){
    testWrap.style.height = '70px';
}    
非表示.onclick = 関数(){
    testWrap.style.height = '0';
}
</スクリプト>

クリップ

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

注意: クリップ属性は絶対配置された要素にのみ適用できます。

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="test">テストコンテンツ</div>

<スクリプト>
show.onclick = 関数(){
    test.style.position = '静的';
    test.style.clip = '自動';
}    
非表示.onclick = 関数(){
    test.style.position = '絶対';
    test.style.clip = 'rect(0 0 0 0)';
}
</スクリプト>

変身

CSS 変換は、主に移動、回転、拡大縮小、傾斜の 4 つの基本操作からなる効果の集合です。マトリックスを設定することで、より複雑な効果を実現することもできます。さまざまな変形関数を使用して要素の可視性効果を実現できます。

注: IE9以降のブラウザはサポートされていません。Safari3.1-8、Android2.1-4.4.4、IOS3.2-8.4ではプレフィックスを追加する必要があります。

【1】スケール

transform:scale(0)の場合、要素は非表示になります

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="test">テストコンテンツ</div>

<スクリプト>
show.onclick = 関数(){
    test.style.transform = 'スケール(1)';
}    
非表示.onclick = 関数(){
    test.style.transform = 'scale(0)';
}
</スクリプト>

【2】回転する

transform:rotateX(90deg)の場合、要素は非表示になります

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="test">テストコンテンツ</div>

<スクリプト>
show.onclick = 関数(){
    test.style.transform = 'rotateX(0)';
}    
非表示.onclick = 関数(){
    test.style.transform = 'rotateX(90deg)';
}
</スクリプト>

【3】歪む

transform:skew(90deg)の場合、要素は非表示になります

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="test">テストコンテンツ</div>

<スクリプト>
show.onclick = 関数(){
    test.style.transform = 'skew(0)';
}    
非表示.onclick = 関数(){
    test.style.transform = 'skew(90deg)';
}
</スクリプト>

カバー

配置された要素を使用して、通常のフロー要素のプロパティをオーバーライドできます。要素の前の疑似要素に同じサイズを設定し、疑似要素の配置属性を制御することで可視性効果を実現します。

<スタイル>
#テスト:ホバー:前{
    コンテンツ： "";
    位置: 絶対;
    幅: 100ピクセル;
    高さ: 60px;
    背景色: 白;
}    
</スタイル>

<div>テストコンテンツ</div>
//マウスを動かして要素を表示したり非表示にしたりします

オフセット

要素を表示および非表示にするもう 1 つの一般的な方法は、要素をオフセットすることです。要素をビューポートの外側に移動することでも、同等の表示/非表示効果を実現できます。

【1】マージントップ

要素をウィンドウの外に移動するには、負のマージンを使用します。負のマージンを持つ要素は通常のフローを離れず、後続の要素もそれに従って移動することに注意してください。

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="test">テストコンテンツ</div>

<スクリプト>
show.onclick = 関数(){
    test.style.marginTop = '10px';
}    
非表示.onclick = 関数(){
    test.style.marginTop = '-9999px';
}
</スクリプト>

【2】左

相対的または絶対的に配置された要素のオフセットプロパティを設定して、要素をビューポートの外側に移動する

<スタイル>
＃テスト{
    位置: 相対的;
/* 位置: 絶対; */
}    
</スタイル>

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="test">テストコンテンツ</div>

 <スクリプト>
show.onclick = 関数(){
    テストスタイル左 = '0';
}    
非表示.onclick = 関数(){
    test.style.left = '-9999px';
}
</スクリプト>

【3】翻訳する

<button id="show">表示</button>
<button id="hide">非表示</button>
<div id="test">テストコンテンツ</div>

<スクリプト>
show.onclick = 関数(){
    test.style.transform = 'translate(0,0)';
}    
非表示.onclick = 関数(){
    test.style.transform = 'translate(-9999px,-9999px)';
}
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: vue+tp5はシンプルなログイン機能を実現

>>: MySQL の最適化: 高品質の SQL 文を書く方法