suchen

Heim  >  Artikel  >  Web-Frontend  >  Javascript-Schaltfläche anzeigen und ausblenden

Javascript-Schaltfläche anzeigen und ausblenden

PHPz
PHPzOriginal
2023-05-12 11:23:066134Durchsuche

Mit der kontinuierlichen Weiterentwicklung der Internet-Technologie ist Javascript (im Folgenden als JS bezeichnet) zu einer allgegenwärtigen Technologie geworden. Aufgrund seiner starken Ausdruckskraft, Flexibilität und anderer Eigenschaften ist JS kein Zubehör mehr für die Website-Entwicklung, sondern ist zum Kern der Webseiteninteraktion und dynamischen Effekte geworden. In diesem Artikel wird eine grundlegende Funktionsweise von JS vorgestellt: wie Inhalte durch Klicken auf eine Schaltfläche angezeigt/ausgeblendet werden.

1. Grundlegende Syntax

Bevor wir das Ein- und Ausblenden von Schaltflächen vorstellen, müssen wir einige grundlegende Syntaxkenntnisse von JS verstehen. In der HTML-Datei der Webseite können wir JS-Code über das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a in die Webseite einbetten, um die Webseitenelemente zu steuern. Das Folgende ist das allgemeine Format zum Einbetten von JS in HTML-Dokumente: 3f1c4e4b6b16bbbd69b2ee476dc4f83a标签将JS代码嵌入到网页中，达到控制网页元素的目的。以下是HTML文档中嵌入JS的一般格式：

<html>
  <head>
    <script>
      JS代码内容
    </script>
  </head>
  <body>
    HTML文档正文
  </body>
</html>

在JS中，我们通常使用document.getElementById()函数来获取网页元素。该函数会根据id属性的值获取对应的HTML元素，并返回该元素的对象。例如：

<button id="btn">点击我</button>
<script>
  var btn = document.getElementById("btn");
</script>

上述代码就可以获取一个id为“btn”的按钮元素，然后将其赋值给变量btn。接下来，我们可以使用JS来控制该按钮的显示/隐藏。

二、点击按钮显示/隐藏

1、控制按钮的显示/隐藏

在JS中，我们可以利用CSS样式的display属性来控制元素的显示或隐藏。当display属性的值为none时，该元素会被隐藏；当display属性的值为block时，该元素会被显示。

因此，我们只需要创建一个按钮并绑定其点击事件，在点击事件中将被控制元素的display属性设置为none或block即可实现该元素的显示/隐藏。

以下是一个简单的实现方法：

<button onclick="toggle()">点击我</button>
<div id="content" style="display:none;">需要显示/隐藏的内容</div>
<script>
  function toggle() {
    var content = document.getElementById("content");
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  }
</script>

上述代码中，我们创建了一个按钮，并在其onclick事件中绑定了函数toggle()，该函数用于控制需要显示/隐藏的元素。在该函数中，我们通过document.getElementById()函数获取到id="content"的元素，并将其赋值给变量content。接下来，我们判断该元素的display属性值是否为none，如果是，则将其设置为block；如果不是，则将其设置为none。

2、控制多个元素的显示/隐藏

上述方法只能控制单个元素的显示/隐藏，如果需要控制多个元素，则需要进行相应修改。我们可以将需要控制的元素封装在同一个父级元素内，并在父级元素的onclick事件中进行遍历，然后通过元素的style.display属性来控制其子元素的显示/隐藏。

以下是一个实现方法：

<button onclick="toggle()">点击我</button>
<div id="wrapper">
  <div class="content" style="display:none;">需要显示/隐藏的内容 1</div>
  <div class="content" style="display:none;">需要显示/隐藏的内容 2</div>
  <div class="content" style="display:none;">需要显示/隐藏的内容 3</div>
</div>
<script>
  function toggle() {
    var wrapper = document.getElementById("wrapper");
    var contents = wrapper.getElementsByClassName("content");
    for (var i = 0; i < contents.length; i++) {
      var content = contents[i];
      if (content.style.display === "none") {
        content.style.display = "block";
      } else {
        content.style.display = "none";
      }
    }
  }
</script>

上述代码中，我们将需要控制的三个元素封装在id="wrapper"的父级元素内。在点击事件触发时，toggle()函数会首先获取到父级元素对象wrapper，然后通过wrapper.getElementsByClassName()方法获取到所有class="content"的元素，并将其存放在数组contents中。接下来，我们使用for循环遍历该数组中所有元素，并判断其display属性的值是否为none，然后将其设置为block或nonerrreee

In JS verwenden wir normalerweise die Funktion document.getElementById(), um Webseitenelemente abzurufen. Diese Funktion ruft das entsprechende HTML-Element basierend auf dem Wert des ID-Attributs ab und gibt das Objekt des Elements zurück. Zum Beispiel:

rrreee

Der obige Code kann ein Schaltflächenelement mit der ID „btn“ abrufen und es dann der Variablen btn zuweisen. Als nächstes können wir JS verwenden, um die Anzeige/Ausblendung der Schaltfläche zu steuern.

2. Klicken Sie auf die Schaltfläche, um die Schaltfläche anzuzeigen/auszublenden🎜🎜In JS können wir das Attribut display des CSS-Stils verwenden, um die Anzeige oder das Ausblenden zu steuern von Elementen. Wenn der Wert des Attributs display none ist, wird das Element ausgeblendet, wenn der Wert des Attributs display block , das Element wird angezeigt. 🎜🎜Wir müssen also nur eine Schaltfläche erstellen und ihr Klickereignis binden. Setzen Sie im Klickereignis das Attribut <code>display des gesteuerten Elements auf none oder Block um das Element anzuzeigen/auszublenden. 🎜🎜Das Folgende ist eine einfache Implementierungsmethode: 🎜rrreee🎜Im obigen Code erstellen wir eine Schaltfläche und binden die Funktion toggle() in ihr onclick-Ereignis, diese Funktion wird verwendet, um die Elemente zu steuern, die angezeigt/ausgeblendet werden müssen. In dieser Funktion erhalten wir das Element von id="content" über die Funktion document.getElementById() und weisen es der Variablen content zu . Als nächstes ermitteln wir, ob der Attributwert display none ist. Wenn ja, setzen Sie ihn auf block auf none. 🎜🎜2. Steuern Sie die Anzeige/Ausblendung mehrerer Elemente. Die obige Methode kann nur die Anzeige/Ausblendung eines einzelnen Elements steuern. Wenn Sie mehrere Elemente steuern müssen, müssen Sie entsprechende Änderungen vornehmen. Wir können die Elemente, die gesteuert werden müssen, im selben übergeordneten Element kapseln, das onclick-Ereignis des übergeordneten Elements durchlaufen und dann das style.display-Attribut des Elements verwenden, um das zu steuern Anzeige/Ausblenden seiner untergeordneten Elemente. 🎜🎜Das Folgende ist eine Implementierungsmethode: 🎜rrreee🎜Im obigen Code kapseln wir die drei Elemente, die gesteuert werden müssen, innerhalb des übergeordneten Elements von id="wrapper". Wenn das Klickereignis ausgelöst wird, ruft die Funktion toggle() zunächst das übergeordnete Elementobjekt wrapper ab und ruft es dann über wrapper.getElementsByClassName()-Methode auf alle class="content"-Elemente anwenden und diese im Array contents speichern. Als nächstes verwenden wir for, um alle Elemente im Array zu durchlaufen und festzustellen, ob der Wert seines display-Attributs none ist, und dann Setzen Sie es auf block oder none. 🎜🎜3. Zusammenfassung🎜🎜In diesem Artikel wird eine grundlegende JS-Operation vorgestellt: Klicken Sie auf eine Schaltfläche, um den Inhalt eines Elements anzuzeigen/auszublenden. Ich glaube, dass jeder diese Fähigkeit durch die Einführung einiger JS-Syntax und die Demonstration spezifischer Implementierungsmethoden besser beherrschen kann. Es ist zu beachten, dass JS mit Vorsicht geschrieben werden muss. Stellen Sie insbesondere beim Referenzieren von DOM-Objekten sicher, dass das Objekt geladen wurde, um unerwartete Fehler zu vermeiden. 🎜

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

JavaScript css html for 封装 循环 class JS 对象 事件 dom display
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So laden Sie Bilder asynchron in jqueryNächster Artikel：So laden Sie Bilder asynchron in jquery

In Verbindung stehende Artikel

Mehr sehen