So zeigen oder verbergen Sie ein Element auf der Website mit JavaScript
Während der gesamten Webentwicklung müssen Benutzer einige Elemente verbergen oder zeigen. Diese Elemente können ein Knopf, eine Animation oder eine Navigationsleiste usw. sein. Meistens möchte der Benutzer, dass eine Schaltfläche oder eine Navigationsleiste für den Desktop -Standpunkt sichtbar ist, jedoch nicht für den mobilen Standpunkt.
Mit JavaScript können Benutzer je nach Verhalten des Benutzers leicht ein Element auf der Webseite ausblenden oder anzeigen. In diesem Artikel werden wir sehen, wie JavaScript für diesen Zweck verwendet wird.
Verstecken und Anzeigen von Elementen in JavaScript
Mit JavaScript können wir ein Element auf der Webseite ausblenden oder anzeigen:
- Stil.Anzeige
- Stil.Sichtweite
Verstehen wir jeden von ihnen getrennt mit Beispielen und vergleichen wir dann, wie sich die unterscheiden:
Wie man Stil benutzt.Anzeige in JavaScript: Die Anzeigeeigenschaft repräsentiert ein Element, das auf Ihrer Webseite angezeigt werden sollte. Wenn Sie diesen Benutzer verwenden, können Sie das gesamte Element ausblenden, und die Seite ist so erstellt.
Syntax:
dokumentieren.GetElementById ("ID-ofelement").Stil.display = "";Hier in Commas sollte ein Wert definiert werden, ob der Inhalt angezeigt werden soll oder nicht. Hier ist ein Beispiel:
Element zu verbergen: Stil.Anzeige = "Keine":
Klicken Sie auf die Schaltfläche "mich ausblenden", um das DIV -Element auszublenden:
Das ist ein Apfel
Wenn der Benutzer auf die Schaltfläche klickt, wird die Funktion aufgerufen, um das Element auszublenden. Dies geschieht durch die Zuweisung eines Wertes nicht dem Stil.Anzeige.
Schauen Sie sich nun die Ausgabe an, wie die Schaltfläche den Abstand des Bildes besetzte. So funktioniert das Anzeigen, es verbirgt das Element vollständig und baut die Seite wieder auf, als ob das Element nicht in erster Linie da wäre.
Ein Element zeigen: Stil.Anzeige = "" oder "Block":
Klicken Sie auf die Schaltfläche "ME), um Element das Divelement anzuzeigen:
In ähnlicher Weise, um das Element anzuzeigen, bewegte sich die Schaltfläche und lieferte Platz für das Element, als die Anzeige vom Stil geändert wurde.display = ”keine” zum Stil.Anzeige = "" ".
Auf diesen Arten wird das Element angezeigt oder vollständig versteckt und nicht nur seine Sichtbarkeit. Die Seite wird nach diesen Verhaltensweisen wieder aufgebaut.
Wie man Stil benutzt.Sichtbarkeit in JavaScript: Die Sichtbarkeit der Stil funktioniert auf ähnliche Weise, aber der Unterschied besteht darin, dass nur die Sichtbarkeit des Elements vor dem Bildschirmleser verborgen ist. Dies bedeutet, dass das Element nicht aus dem Seitenfluss entfernt wird, wodurch der Platz auf der Seite gelassen wird.
Syntax:
dokumentieren.GetElementById ("ID-ofelement").Stil.Sichtbarkeit = "";Hier in Commas sollte ein Wert von „versteckt“ oder „“ kein Wert definiert werden, ob der Inhalt angezeigt werden soll oder nicht. Um dies besser zu verstehen, hier ist ein Beispiel:
Dies ist ein Absatz.
Dies ist ein weiterer Absatz.
Nun, hier, als die Schaltfläche angeklickt wurde, um die Sichtbarkeit auszublenden, versteckte sie sie nur für das Auge des Betrachters.
Darin war der Speicherplatz auf der Webseite nicht vom Element besetzt. Dies zeigt, wie Stil.Anzeige und Stil.Sichtweite abweichen.
Abschluss
Jeder möchte einige bestimmte Elemente auf seiner Webseite verbergen oder zeigen. In dieser Anleitung haben wir Möglichkeiten gelernt, die Sichtbarkeit von Elementen auf der Webseite mit JavaScript zu ändern. Es gibt zwei spezifische Möglichkeiten, aber sie unterscheiden sich leicht voneinander. Verwendung Stil.Anzeige Der Inhalt wird versteckt und sein Raum wird von den anderen Inhalten besetzt. Während Stil.Sichtweite, Der Inhalt ist nur für den Leser versteckt, aber er ist immer noch da, da sein Raum nicht von anderen Elementen besetzt werden kann. Dies ist äußerst nützlich für Webentwickler, da Entwickler möchten, dass einige Inhalte versteckt werden und einige nach dem Standpunkt angezeigt werden können.