JavaScript属性またはCSSスタイルで要素を非表示にした場合、結果に違いがあるのではないかと思います。
例えば:
element.setAttribute("hidden", true);
対
element.style.visibility = "hidden";
私はこれらの2つの可能性を少し試しました。私の想定では、JavaScriptで要素を非表示にすると、要素は完全に非表示になり、フローから除外されます。 CSSスタイルで非表示にすると、要素は表示されませんが、そのまま表示されます。
ほとんどの場合、これは私の実験では正しいように見えましたが、時々そうではありませんでした。それでは、これら2つの可能性の本当の違いは何ですか?
CSSで要素を非表示にするには、2つの基本的な方法があります。
まず、 _visibility: hidden;
_ (または_element.style.visibility = "hidden";
_)があります。これにより、アイテムが非表示になります。ドキュメント内のスペースを占有しますが、フローの一部です。
次に、 _display: none;
_ (または_element.style.display = "none";
_)があります。これにより、ドキュメントのフローから要素が完全に削除されます。 DOMにまだ存在し、ページにレンダリングされていないだけです。
HTML5の hidden
属性 (またはelement.setAttribute("hidden", true);
)は、おおよそ_display: none;
_と同等です。
実際、古いブラウザに属性との互換性を持たせるために、これは多くの場合スタイルシートに追加されます:
_[hidden] { display: none; }
_