Ein Element ausblenden: Unterschied zwischen JavaScript-Attribut und CSS-Stil

Question

Ich frage mich, ob es ein Unterschied im Ergebnis beim Ausblenden eines Elements mit JavaScript-Attribut oder CSS-Stil gibt.

Zum Beispiel:

element.setAttribute("hidden", true); 

vs

element.style.visibility = "hidden"; 

experimentierte ich ein wenig mit diesen beiden Möglichkeiten. Meine Annahme ist, dass das Element, wenn es mit JavaScript versteckt wird, wirklich versteckt und aus dem Fluss genommen wird; und beim Verstecken mit CSS Style wird das Element einfach nicht angezeigt, aber immer noch dort.

Meistens schien dies in meinen Experimenten richtig, aber manchmal nicht. Was ist der wahre Unterschied zwischen diesen beiden Möglichkeiten?

Answer 1

ist es zwei grundlegende Methoden um ein Element mit CSS zu verstecken:

Zuerst gibt es visibility: hidden; (oder element.style.visibility = "hidden";). Dies macht den Gegenstand einfach unsichtbar. Es nimmt immer noch Platz im Dokument ein, es ist immer noch Teil des Flusses.

Dann gibt es display: none; (oder element.style.display = "none";). Dies entfernt das Element vollständig aus dem Fluss des Dokuments. Es ist immer noch im DOM vorhanden, es wird nur nicht auf der Seite gerendert.

HTML5s hidden attribute (oder element.setAttribute("hidden", true);) entspricht in etwa display: none;.

In der Tat, ältere Browser-Kompatibilität mit dem Attribute zu geben, dies wird oft hinzugefügt, um das Stylesheet:

[hidden] { display: none; } 

Answer 2

Der Unterschied zwischen diesen beiden Codezeilen besteht darin, dass einer von ihnen dem Element ein Attribut mit dem angegebenen Wert hinzufügt, während der andere eine Eigenschaft innerhalb der Stildeklaration festlegt.

Zum Beispiel:

Lassen Sie uns sagen, dass Ihr Element Variable ein div war. Wenn Sie

element.setAttribute("hidden", true); 

Die Elemente nun wie folgt aussehen nennen:

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

Wenn Sie

element.style.visibility = "hidden"; 

nennen Sie erhalten:

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