CSSで要素の非表示を制御する方法

方法: 1. "opacity:0;" を使用します。 2. "visibility: hidden;" を使用します。 3. "diaplay:none;" を使用します。 4. "position:absolute;top:-999px" を使用します。 ;"; 5. クリップパス属性を使用します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS を使用してページ要素を非表示にする方法はたくさんあります。

最初のメソッド: opacity: 0;

opacity プロパティは、通常、別の視点から見たときの要素の透明度を設定するために使用されます。透明度が 0 の場合、要素は視覚的に非表示になります。

この属性は、要素の境界ボックスを変更するように設計されていません。要素自体は依然として独自の位置を占め、Web ページのレイアウトに貢献します。また、ユーザーの操作にも応答します。

2 番目の方法: visibility: hidden;

2 番目に説明する属性は可視性です。

値を hidden に設定すると、要素が非表示になります。

不透明度属性と同様、非表示要素も Web ページのレイアウトに影響します。

不透明度との唯一の違いは、ユーザーの操作に応答しないことです。

また、この属性を設定すると、その要素は画面読み上げソフトウェア上で非表示になります。

もう 1 つ注意すべき点は、要素の可視性が非表示に設定されているが、その子孫要素の 1 つを表示したい場合は、その子孫要素の可視性を明示的に可視に設定するだけでよいことです (スタイルカバー）。

3 番目の方法: diaplay: none;

display 属性は、単語の意味に従って要素を実際に非表示にします。

表示属性を none に設定すると、要素が非表示になり、ボックス モデルも生成されなくなります。この属性を使用すると、非表示の要素はスペースを占有しません。

それだけでなく、表示を none に設定すると、要素に対するユーザーの直接対話操作は無効になります。

さらに、このメソッドでは要素がまったく存在していないかのような効果が得られるため、画面読み上げソフトウェアは要素の内容を読み取りません。

この要素の子孫要素も同時に非表示になります。

このプロパティに過剰なアニメーションを追加することは無効であり、異なる状態値間の切り替えは常に即座に有効になります。

ただし、この要素には引き続き DOM 経由でアクセスできることに注意してください。したがって、DOM を通じて操作できます。

4 番目の方法: position:Absolute;

対話したい要素があるが、それは望まないとします。 Web ページのレイアウトに影響しますが、この状況を処理する適切な属性はありません (不透明度と可視性はレイアウトに影響しますが、mdisplay はレイアウトに影響しませんが、直接対話することはできません)。

この場合、要素を表示領域の外に移動することのみを検討できます。この方法はレイアウトに影響せず、要素の操作性を維持できる可能性があります。

具体的には、position 属性を ABS (絶対位置決め) に設定することで実現されます。

position: absolute;
top: -999px;
left: -999px;

5 番目の方法: clip-path

要素を非表示にするもう 1 つの方法は、特に Clip -path 属性、この属性を使用して要素をクリップすることです。は比較的新しいため、ブラウザの互換性は比較的劣ります。

clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

しかし、それでも理解する必要があります。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSで要素の非表示を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。