dom 要素を非表示にする 3 つの CSS メソッドとは何ですか

dom 要素を非表示にする 3 つの CSS メソッド: 1. "visibility:hidden;" スタイルを dom 要素に追加します; 2. "diaplay:none;" スタイルを dom 要素に追加します; 3. " を追加します不透明度:0;」スタイル。

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

dom 要素を非表示にする 3 つの CSS メソッド

1、visibility:hidden;

値を hidden に設定すると、要素が非表示になります。 opacity 属性と同様に、非表示要素も Web ページのレイアウトに影響を与えます。不透明度との唯一の違いは、ユーザーの操作に応答しないことです。また、画面読み上げソフトでは要素が非表示になります。

2, diaplay:none;

display 属性は、単語の意味に従って要素を実際に非表示にします。表示プロパティを none に設定すると、要素は表示されなくなり、ボックス モデルも生成されなくなります。この属性を使用すると、非表示の要素はスペースを占有しません。それだけでなく、display が none に設定されると、要素に対するユーザーの直接対話操作は無効になります。また、画面読み取りソフトウェアは要素の内容を読み取りません。このようにすると、要素がまったく存在していないかのような効果が得られます。

この要素の子孫要素も同時に非表示になります。このプロパティをオーバーアニメーションしても効果はありません。異なる状態値間の遷移は常に即座に有効になります。

ただし、この要素には引き続き DOM 経由でアクセスできることに注意してください。したがって、DOM を通じて操作できます。 $("") などの非表示ではない他の要素と同様に。

3, opacity:0;

opacity属性 要素の透明度を設定することを意味します。要素の境界ボックスを変更するようには設計されていません。このビットは、要素を視覚的に非表示にするためにのみ、不透明度を 0 に設定します。要素自体は依然として独自の位置を占め、Web ページのレイアウトに貢献しますが、ユーザーの操作にも応答します。

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

以上がdom 要素を非表示にする 3 つの CSS メソッドとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。