Heim
Web-Frontend
Front-End-Fragen und Antworten
JavaScript verwendet if, um die Hintergrundfarbumschaltung zu ändern
Web-Frontend
Front-End-Fragen und Antworten
JavaScript verwendet if, um die Hintergrundfarbumschaltung zu ändern
JavaScript verwendet if, um die Hintergrundfarbumschaltung zu ändern
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
-Tag ein <script>-Tag hinzugefügt, um die Javascript-Datei einzuleiten: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><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></pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>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: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><body> <div id="app"> <h1>Hello, world!</h1> </div> </body></pre><div class="contentsignin">Nach dem Login kopieren</div></div><p> 2. Javascript implementiert den Wechsel der Hintergrundfarbe </p><p> 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. </p><p>Der Beispielcode lautet wie folgt: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var body = document.querySelector('body'); if (body.style.backgroundColor === 'white') { body.style.backgroundColor = 'black'; } else { body.style.backgroundColor = 'white'; }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>Codeanalyse: </p><p>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. </p><p>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. </p><p>3. Verwenden Sie Schaltflächen, um den Wechsel der Hintergrundfarbe auszulösen. </p><p>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. </p><p>Der HTML-Beispielcode lautet wie folgt: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><button onclick="toggleBackground()">Click me!</button></pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>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 . </p><p>Wir müssen eine Funktion namens toggleBackground() hinzufügen. Der Code lautet wie folgt: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function toggleBackground() { var body = document.querySelector('body'); if (body.style.backgroundColor === 'white') { body.style.backgroundColor = 'black'; } else { body.style.backgroundColor = 'white'; } }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>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. </p><p> 4. Vollständige Code-Implementierung </p><p>Das Folgende ist der vollständige HTML-Seitencode, der zur Verwendung direkt in den Editor kopiert werden kann. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <!DOCTYPE html> <html> <head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <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>