suchen

Heim  >  Artikel  >  Web-Frontend  >  JavaScript verwendet if, um die Hintergrundfarbumschaltung zu ändern

JavaScript verwendet if, um die Hintergrundfarbumschaltung zu ändern

WBOY
WBOYOriginal
2023-05-12 14:16:37860Durchsuche

JavaScript ist eine High-Level-Programmiersprache, die häufig in der Webentwicklung verwendet wird. Mit Javascript kann der Stil von Webseiten geändert werden, einschließlich der Änderung der Farbe, Schriftart und des Stils von Elementen. In diesem Artikel wird erläutert, wie Sie mit der if-Anweisung von Javascript die Hintergrundfarbe ändern.

1. Vorbereitung

Bevor Sie Javascript verwenden, müssen Sie es zunächst in die HTML-Seite einführen. Normalerweise wird dem 93f0f5c25f18dab9d176bd4f6de5d30e-Tag ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag hinzugefügt, um die Javascript-Datei einzuleiten: 

<html>
  <head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Hello, world!</h1>
    </div>
  </body>
</html>

Zusätzlich benötigen wir ein Seitenelement um die Hintergrundfarbe anzuzeigen. In diesem Beispiel wählen wir das Body-Element als Hintergrundfarb-Anzeigebereich aus. Der HTML-Code lautet wie folgt: 

<body>
  <div id="app">
    <h1>Hello, world!</h1>
  </div>
</body>

2. Javascript implementiert den Wechsel der Hintergrundfarbe

Nachdem wir Javascript in die HTML-Seite eingeführt haben, können wir Javascript verwenden, um den Stil von Seitenelementen zu steuern . In diesem Beispiel können wir Javascript verwenden, um die Hintergrundfarbe des Body-Elements zu ändern. Sie können eine if-Anweisung verwenden, um die Hintergrundfarbe zu ändern.

Der Beispielcode lautet wie folgt: 

var body = document.querySelector('body');
if (body.style.backgroundColor === 'white') {
  body.style.backgroundColor = 'black';
} else {
  body.style.backgroundColor = 'white';
}

Codeanalyse:

Zuerst verwenden wir document.querySelector('body'), um den zu erhalten Körperelement. Diese Funktion gibt einen Verweis auf ein Element zurück, das mithilfe des Textkörpers im Code manipuliert werden kann.

Dann verwenden wir die if-Anweisung, um zu bestimmen, ob die aktuelle Hintergrundfarbe weiß ist. Wenn die aktuelle Hintergrundfarbe Weiß ist, stellen Sie die Hintergrundfarbe auf Schwarz ein. Andernfalls stellen Sie die Hintergrundfarbe auf Weiß ein.

3. Verwenden Sie Schaltflächen, um den Wechsel der Hintergrundfarbe auszulösen.

Jetzt haben wir die if-Anweisung von Javascript implementiert, um die Hintergrundfarbe zu wechseln. Wenn der Benutzer jedoch die Hintergrundfarbe bequemer ändern möchte, können wir eine Schaltfläche hinzufügen, um das Umschalten der Hintergrundfarbe auszulösen. Dies kann durch Hinzufügen eines im HTML enthaltenen Schaltflächenelements erreicht werden.

Der HTML-Beispielcode lautet wie folgt: 

<button onclick="toggleBackground()">Click me!</button>

Wir haben ein Schaltflächenelement hinzugefügt und das onclick-Attribut verwendet, um die Funktion toggleBackground() anzugeben, die aufgerufen werden soll, wenn auf die Schaltfläche geklickt wird .

Wir müssen eine Funktion namens toggleBackground() hinzufügen. Der Code lautet wie folgt: 

function toggleBackground() {
  var body = document.querySelector('body');
  if (body.style.backgroundColor === 'white') {
    body.style.backgroundColor = 'black';
  } else {
    body.style.backgroundColor = 'white';
  }
}

Diese Funktion ist dieselbe wie der vorherige Beispielcode, sie verwendet eine if-Anweisung um den Hintergrundfarbwechsel zu erreichen. Wenn Sie auf die Schaltfläche klicken, wird diese Funktion aufgerufen und die Hintergrundfarbe ändert sich in eine andere Farbe.

4. Vollständige Code-Implementierung

Das Folgende ist der vollständige HTML-Seitencode, der zur Verwendung direkt in den Editor kopiert werden kann. 

 

  
    
    
    <script>
      function toggleBackground() {
        var body = document.querySelector('body');
        if (body.style.backgroundColor === 'white') {
          body.style.backgroundColor = 'black';
        } else {
          body.style.backgroundColor = 'white';
        }
      }
    </script>
  
  
    <button onclick="toggleBackground()">Click me!</button>
    

      
Hello, world!

In der gesamten HTML-Datei haben wir ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag hinzugefügt, das die Funktion toggleBackground() enthält, und ein bb9345e55eb71822850ff156dfde57c8-Element, um die Hintergrundfarbe auszulösen schalten. Wenn auf die Schaltfläche geklickt wird, wird die Funktion toggleBackground() aufgerufen und die Hintergrundfarbe wechselt zu einer anderen Farbe.

In diesem Artikel wird erläutert, wie Sie die if-Anweisung von Javascript verwenden, um die Hintergrundfarbe zu ändern. Gleichzeitig zeigen wir Ihnen auch, wie Sie das bb9345e55eb71822850ff156dfde57c8-Element in einer HTML-Seite verwenden, um die Umschaltung der Hintergrundfarbe auszulösen. Wenn Sie mit Javascript komplexere interaktive Effekte erzielen möchten, können Sie diese Sprache gründlich erlernen, um Ihre Webseiten lebendiger und interessanter zu gestalten.

Das obige ist der detaillierte Inhalt vonJavaScript verwendet if, um die Hintergrundfarbumschaltung zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Knoten in Javascript ändernNächster Artikel：Knoten in Javascript ändern

In Verbindung stehende Artikel

Mehr sehen