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

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 文を書く方法

推薦する

星のきらめき効果を実現するネイティブ js

この記事の例では、星のきらめき効果を実現するためのjsの具体的なコードを共有しています。具体的な内容...

Hyper-V の紹介とインストールと使用 (詳細な図解)

はじめに:IT 業界の巨人である Microsoft 独自の仮想化技術は、VMware や Citr...

jsはシンプルな計算機を実装します

参考までに、ネイティブjsを使用して簡単な計算機(詳細なコメント付き)を実装します。具体的な内容は次...

Nginx ロケーション ディレクティブ URI マッチング ルールの詳細な概要

1. はじめにロケーション命令は、http モジュールのコア構成です。事前に定義された URL マッ...

セマンティック XHTML タグの紹介

まず最初に指摘しておきたいのは、人間は視覚的な区分を通じてコン​​テンツの意味を判断できるが、検索エ...

ワンクリックで雨や雪のエフェクトを実現する ThingJS パーティクルエフェクト

目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...

Linux で JDK 環境を構成する方法

1. 公式ウェブサイトにアクセスして、jdk-8u162-linux-x64.tar.gzなどのLi...

ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析

<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...

WeChatアプレット開発の章:落とし穴の記録

最近、会社初のミニプログラムの開発に参加しました。開発経験は基本的にWebViewをベースとしたハイ...

CSS でレスポンシブ レイアウトを実装する方法

CSS でレスポンシブ レイアウトを実装するレスポンシブレイアウトは非常にハイエンドで難しいように思...

Portainer を使用した Docker コンテナのデプロイのプロジェクト実践

目次1. 背景2. 操作手順3. Portinerをインストールする3.1 Dockerのデプロイメ...

Linux で AutoFs マウント サービスをインストールするチュートリアル

Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...

Flask アプリケーションの Docker デプロイ実装手順

1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...

HTML ページに SVG を挿入する複数の方法

SVG (Scalable Vector Graphics)は、XML 構文に基づいた画像形式です。...

MySQL の低速クエリの最適化: 理論と実践からの制限の利点

多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...