So ändern Sie die CSS-Anzeige mit js

Im Prozess der Webentwicklung müssen wir häufig den Stil mithilfe von JavaScript ändern. Eines der am häufigsten verwendeten Szenarios ist die Änderung der Sichtbarkeit eines Elements. In CSS können Sie das Anzeigeattribut verwenden, um die Sichtbarkeit eines Elements zu steuern. In JavaScript können wir das DOM verwenden, um auf den Stil von Elementen zuzugreifen und diesen zu ändern, um die Sichtbarkeit von Elementen zu steuern.

1. Anzeigeattribut

Das Anzeigeattribut wird verwendet, um zu steuern, wie ein Element im Dokument angezeigt wird. Sein Wert kann der folgende sein:

1. none: Das Element wird nicht gerendert, d. h. es wird nicht im Dokument angezeigt.
2. Block: Das Element wird als Element auf Blockebene gerendert, d. h. das Element nimmt eine ganze Zeile ein.
3. inline: Das Element wird als Inline-Element gerendert, d. h. das Element belegt nicht eine ganze Zeile, sondern wird innerhalb einer Zeile angezeigt.
4. Inline-Block: Das Element wird als Inline-Block-Level-Element gerendert, das heißt, das Element wird in einer Zeile angezeigt und die Breite, Höhe, der Rahmen und andere Stile können festgelegt werden.
5. Tabelle, Tabellenzeile, Tabellenzelle: Elemente werden als tabellenbezogene Elemente gerendert. table stellt Elemente als Tabellen dar, table-row stellt Elemente als Tabellenzeilen dar und table-cell stellt Elemente als Tabellenzellen dar.
6. Flex, Inline-Flex: Elemente werden als Flex-Container gerendert, die zur Implementierung von responsivem Layout und anderen Szenarien verwendet werden können.

2. JavaScript betreibt das Anzeigeattribut

In JavaScript können wir das Anzeigeattribut eines Elements über das DOM abrufen und ändern. Zuerst müssen wir das zu bedienende Element über die Methode getElementById() des Dokumentobjekts abrufen. Diese Methode muss die abzurufende Element-ID übergeben, zum Beispiel:

var myDiv = document.getElementById('myDiv');

Der obige Code ruft das Element mit der ID „myDiv“ ab und weist es der Variablen myDiv zu. Als nächstes können wir über das Stilattribut auf die Stilattribute des Elements zugreifen. Sie können beispielsweise den folgenden Code verwenden, um das Anzeigeattribut eines Elements auf „Keine“ zu setzen, sodass das Element nicht auf der Seite angezeigt wird:

myDiv.style.display = 'none';

Wir können Elemente auch anzeigen und ausblenden, indem wir das Anzeigeattribut des Elements beurteilen. Der folgende Code ermöglicht beispielsweise die Anzeige des Elements, indem sein Anzeigeattribut auf „Blockieren“ gesetzt wird, wenn es ursprünglich ausgeblendet war:

if (myDiv.style.display === 'none') {
  myDiv.style.display = 'block';
}

Wenn das Element ursprünglich angezeigt wurde, können Sie sein Anzeigeattribut auf „none“ setzen, um das Element auszublenden:

if (myDiv.style.display !== 'none') {
  myDiv.style.display = 'none';
}

3. Anwendungsszenarien

1. Popup-Ebenen ein- und ausblenden

In der Webentwicklung ist es häufig erforderlich, Popup-Ebenen zu verwenden, um mehr Inhalte anzuzeigen oder zu interagieren. Die Popup-Ebene muss normalerweise ausgelöst werden, wenn der Benutzer auf eine Schaltfläche oder einen Link klickt, und geschlossen werden, wenn der Benutzer auf die Schaltfläche „Schließen“ klickt. Um diese Funktion zu erreichen, können wir JavaScript verwenden, um die Anzeigeattribute der Popup-Ebene zu ändern. Im Anfangszustand der Popup-Ebene können Sie ihr Anzeigeattribut auf „Keine“ setzen, was bedeutet, dass sie nicht auf der Seite angezeigt wird. Wenn der Benutzer auf die Schaltfläche oder den Link klickt, die die Pop-up-Ebene auslöst, kann das Anzeigeattribut der Pop-up-Ebene auf „Blockieren“ gesetzt werden, um die Anzeige der Pop-up-Ebene zu blockieren. Wenn der Benutzer in der Popup-Ebene auf die Schaltfläche „Schließen“ klickt, kann die Anzeigeeigenschaft der Popup-Ebene auf „Keine“ gesetzt werden, um die Popup-Ebene zu schließen.

2. Reaktives Layout implementieren

Reaktives Layout bezieht sich auf die Bildschirmgröße verschiedener Geräte, indem das Layout und der Stil an unterschiedliche Bildschirmgrößen angepasst werden. Bei der Implementierung eines responsiven Layouts müssen wir normalerweise den Anzeigemodus und die Position bestimmter Elemente entsprechend der Bildschirmgröße anpassen. Unter anderem kann das Anzeigeattribut verwendet werden, um den Anzeigemodus von Elementen zu steuern und ein reaktionsfähiges Layout zu erreichen. Beispielsweise möchten wir in einer typischen Navigationsleiste die Elemente der Navigationsleiste horizontal angeordnet anzeigen, wenn die Bildschirmbreite kleiner als ein bestimmter Schwellenwert ist, und vertikal angeordnet, wenn die Bildschirmbreite größer als dieser Schwellenwert ist. Dieses responsive Layout kann durch Ändern der Anzeigeattribute jedes Elements in der Navigationsleiste erreicht werden.

3. Elementsichtbarkeit basierend auf Benutzerverhalten steuern

In einigen Szenarien möchten wir die Sichtbarkeit eines Elements basierend auf Benutzerverhalten steuern. Wenn der Benutzer beispielsweise ein Schlüsselwort in das Suchfeld eingibt, möchten wir die Spalte mit den Suchergebnissen anzeigen. Zu diesem Zeitpunkt können Sie das Eingabeereignis des Suchfelds überwachen und das Anzeigeattribut der Suchergebnisspalte auf „Blockieren“ setzen, um die Anzeige der Suchergebnisse zu blockieren, wenn der Benutzer ein Schlüsselwort eingibt. Wenn der Benutzer die Schlüsselwörter löscht, können die Suchergebnisse ausgeblendet werden, indem das Anzeigeattribut der Suchergebnisspalte auf „Keine“ gesetzt wird.

4. Zusammenfassung

Durch Ändern des Anzeigeattributs eines Elements können wir die Sichtbarkeit des Elements steuern und verschiedene Webentwicklungsszenarien implementieren. Bei der Implementierung dieser Szenarien müssen wir die Stilattribute von Elementen über JavaScript abrufen und ändern. Die Beherrschung dieser Technologie kann uns helfen, verschiedene Aufgaben in der Webentwicklung besser zu erledigen.

Das obige ist der detaillierte Inhalt vonSo ändern Sie die CSS-Anzeige mit js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!