ページ要素の非表示

hidden、display:none、visibility:hidden、opacity=0のいずれかの方法でページ要素を隠すことができますが、hiddenはhtml属性で、残りの3つはスタイルです.また、以下の違いがあります.
hidden
hiddenはhtml 5で新しく追加された属性で、具体的には 。 hidden属性は実際に要素にdisplay:noneスタイルを追加したものです.
display: none;

ブラウザはdisplay:noneという属性を生成しません.の双曲線コサインを返します.

display:noneはスペースを占有しない(レンダリングしないのでスペースを占有しない)ため、このアトリビュートを動的に変更すると再配置が発生します.

display:noneは布団類に継承されませんが、サブクラスも表示されません.

visibility: hidden;

要素は隠されますが、消えずに空間を占めています.

visibility:hiddenは布団クラスに継承され、サブクラスは表示された設定visibility:visibleによってもよい.を返します.

visibility:hiddenは、要素がバインドされたイベントをトリガーしません.

visibility:hiddenこのプロパティを動的に変更すると、再描画が発生します.

opacity=0

opacity=0は透明度100%にすぎず、要素は非表示であり、依然として空間を占めている.

opacity=0は、要素によって継承されますが、サブ要素はopacity=1では非表示にできません.

opacity=0の要素は、バインドされたイベントをトリガーすることができます.