web-dev-qa-db-ja.com

要素の非表示：Javascript属性とCSSスタイルの違い

JavaScript属性またはCSSスタイルで要素を非表示にした場合、結果に違いがあるのではないかと思います。

例えば：

element.setAttribute("hidden", true);

対

element.style.visibility = "hidden";

私はこれらの2つの可能性を少し試しました。私の想定では、JavaScriptで要素を非表示にすると、要素は完全に非表示になり、フローから除外されます。 CSSスタイルで非表示にすると、要素は表示されませんが、そのまま表示されます。

ほとんどの場合、これは私の実験では正しいように見えましたが、時々そうではありませんでした。それでは、これら2つの可能性の本当の違いは何ですか？

javascripthtmlcssvisibilityhidden
20
Jbartmann

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; }
_
17
Olly Hodgson