Javascript anzeigen, ausblenden

Titel: Beherrschen Sie Frontend-Kenntnisse – Javascript ein- und ausblenden

In der Frontend-Entwicklung ist das Ein- und Ausblenden eine häufig verwendete Funktion. Beispielsweise müssen wir unter bestimmten Bedingungen häufig einige Elemente ein- oder ausblenden, um interaktive Effekte zu erzielen oder das Seitenerlebnis zu optimieren. In diesem Artikel wird die Implementierungsmethode zum Anzeigen und Ausblenden von Javascript-Code vorgestellt, um Front-End-Kenntnisse zu beherrschen.

1. Anzeigen und Ausblenden über CSS

Die einfachste Möglichkeit, dies zu implementieren, besteht darin, Elemente über das Anzeigeattribut von CSS anzuzeigen und auszublenden.

Wenn das Element angezeigt werden muss, setzen Sie seinen Anzeigeattributwert auf „Block“ oder „Inline-Block“:

display: block | inline-block;

Wenn das Element ausgeblendet werden muss, setzen Sie seinen Anzeigeattributwert auf „Keine“:

display: none;

Aber diese Methode bringt Opfer etwas Flexibilität. Wenn wir lediglich die Transparenz oder Position des Elements steuern möchten, ohne es vollständig zu verbergen, scheint diese Methode etwas unzureichend zu sein.

2. Anzeigen und Ausblenden über jQuery

Das jQuery-Framework bietet spezifische Methoden zum Anzeigen und Ausblenden. Mit den Methoden fadeIn () und fadeOut () von jQuery können wir die Farbverlaufsanzeige und das Ausblenden von Elementen leicht realisieren:

// 显示元素
$(selector).fadeIn(speed,callback);

// 隐藏元素
$(selector).fadeOut(speed,callback);

Unter diesen ist der Selektor der Selektor des zu steuernden Elements, das angezeigt und ausgeblendet werden soll. Geschwindigkeit ist die Geschwindigkeit des Gradienten. Rückruf ist die Rückruffunktion, die aufgerufen wird, wenn der Farbverlauf abgeschlossen ist.

Darüber hinaus bietet jQuery auch die Methode toggle(), die je nach Status des Elements wechseln kann, dh es ausblenden, wenn das Element angezeigt wird, und anzeigen, wenn das Element ausgeblendet ist:

$(selector).toggle(speed,callback);

3. Anzeigen und Ausblenden durch natives Javascript realisieren

Wenn wir die Verwendung von Frameworks wie jQuery vermeiden müssen, müssen wir normalerweise natives Javascript verwenden, um Elemente anzuzeigen und auszublenden. Wir können dies tun, indem wir den Stil des Elements ändern oder den Sichtbarkeitsattributwert des Elements direkt festlegen.

Methode 1: Stil des Elements ändern

Wir können Elemente ein- und ausblenden, indem wir den Stil des Elements ändern. Wenn das Element angezeigt werden muss, setzen wir den Anzeigeattributwert seines Stils auf block oder inline-block:

// 显示元素
document.getElementById("element_id").style.display = "block | inline-block";

Wenn das Element ausgeblendet werden muss, setzen wir den Anzeigeattributwert seines Stils auf none:

// 隐藏元素
document.getElementById("element_id").style.display = "none";

Methode 2: Legen Sie das Sichtbarkeitsattribut des Elements fest

Eine andere Methode besteht darin, Elemente anzuzeigen und auszublenden, indem Sie das Sichtbarkeitsattribut des Elements festlegen. Bei diesem Ansatz bleiben Größe und Position des Elements erhalten.

Wenn ein Element angezeigt werden muss, setzen Sie seinen Sichtbarkeitsattributwert auf sichtbar:

// 显示元素
document.getElementById("element_id").style.visibility = "visible";

Wenn ein Element ausgeblendet werden muss, setzen Sie seinen Sichtbarkeitsattributwert auf versteckt:

// 隐藏元素
document.getElementById("element_id").style.visibility = "hidden";

Bei der Verwendung des Sichtbarkeitsattributs ist Folgendes zu beachten Um ein Element auszublenden, behält das Element weiterhin seine Position auf der Seite.

4. Anzeigen und Ausblenden durch React

In React verwenden wir normalerweise den Status der Komponente, um das Anzeigen und Ausblenden von Elementen zu steuern. Wenn sich der Status der Komponente ändert, rendert React die Seite automatisch neu, um Elemente anzuzeigen und auszublenden.

Der folgende Code zeigt beispielsweise Elemente durch Klicken auf eine Schaltfläche an und blendet sie aus:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }
  
  toggleElement = () => {
    this.setState({
      showElement: !this.state.showElement
    });
  }
  
  render() {
    const { showElement } = this.state;
    return (
      <div>
        <button onClick={this.toggleElement}>Toggle Element</button>
        {showElement && <div>Element Content</div>}
      </div>
    );
  }
}

Im obigen Code ist showElement der Status, der zum Steuern der Anzeige und Ausblendung von Elementen verwendet wird. Wenn auf die Schaltfläche geklickt wird, löst die Methode toggleElement() eine Statusänderung aus und rendert die Seite neu. Wenn showElement „true“ ist, wird das Element auf der Seite angezeigt; wenn showElement „false“ ist, wird das Element ausgeblendet.

Die oben genannten sind mehrere gängige Implementierungsmethoden zum Anzeigen und Ausblenden. Unabhängig davon, ob Sie natives Javascript, jQuery oder React verwenden, können Sie Elemente bei Bedarf anzeigen und ausblenden, wenn sie nicht benötigt werden Verbesserung der Seiteninteraktion und des Benutzererlebnisses.

Das obige ist der detaillierte Inhalt vonJavascript anzeigen, ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!