要素を隠す：JavaScriptの属性とCSSのスタイルの違い

Question

JavaScriptの属性やCSSのスタイルで要素を非表示にしたときに結果に違いがあるのだろうかと思います。例えば

：

element.style.visibility = "hidden"; 

VS

element.setAttribute("hidden", true); 

Iは、これら二つの可能性を有するビットを実験しました。私の前提は、JavaScriptでそれを隠すと、その要素は本当に隠されて流れから取り除かれるということです。 CSSスタイルで隠れている場合、その要素は表示されずにそのまま表示されます。

ほとんどこれは私の実験では正しいと思われましたが、時にはそうではありません。では、これらの2つの可能性の間の実際の違いは何ですか？

Answer 1

CSSで要素を隠すため：

まず、visibility: hidden;（またはelement.style.visibility = "hidden";）があります。これはアイテムを見えなくするだけです。それでも文書内のスペースを占めますが、依然としてフローの一部です。

display: none;（またはelement.style.display = "none";）です。これにより、要素が文書のフロー全体から削除されます。それはまだDOMに存在しており、ページには表示されません。

HTML5のhidden attribute（またはelement.setAttribute("hidden", true);）は、おおよそdisplay: none;に相当します。実際に

、古いブラウザに属性との互換性を与えるために、これは多くの場合、スタイルシートに追加されます。

[hidden] { display: none; } 

Answer 2

これらの2行のコードの違いは、一方が指定された値を持つ要素に属性を追加し、他方がスタイル宣言内のプロパティを設定することです。

たとえば、

たとえば、要素の変数がdivだったとします。あなたは

element.setAttribute("hidden", true); 

を呼び出すときの要素は次のようになります：

<div hidden="true"></div> 

あなたはあなたが得る

element.style.visibility = "hidden"; 

を呼び出す場合：2つの基本的な方法があります

<div style="visibility: hidden;"></div>