JavaScript uses if to change background color switching-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

JavaScript uses if to change background color switching

May 12, 2023 pm 02:16 PM

JavaScript is a high-level programming language widely used in web development. Javascript can be used to change the style of a web page, including modifying the color, font, and style of elements. This article will introduce how to use the if statement of Javascript to switch the background color.

1. Preparation

Before using Javascript, you first need to introduce it into the HTML page. Usually, a <script> tag is added to the <head> tag of HTML to introduce the Javascript file. The sample code is as follows:

&lt;html&gt;
  &lt;head&gt;
    &lt;script src=&quot;https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;h1&gt;Hello, world!&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

Copy after login

In addition, we also need a page element to display the background color. In this example, we select the body element as the background color display area. The HTML code is as follows:

&lt;body&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;h1&gt;Hello, world!&lt;/h1&gt;
  &lt;/div&gt;
&lt;/body&gt;

Copy after login

2. Javascript implements background color switching

After introducing Javascript into the HTML page, we can use Javascript to control the style of page elements. In this example, we can use Javascript to modify the background color of the body element. You can use an if statement to switch the background color.

The sample code is as follows:

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

Copy after login

Code analysis:

First, we use document.querySelector('body') to get the body element. This function returns a reference to an element, which can be manipulated using the body in code.

Then, we use the if statement to determine whether the current background color is white. If the current background color is white, set the background color to black; otherwise, set the background color to white.

3. Use the button to trigger the background color switching

Now, we have implemented the background color switching through the if statement of Javascript. However, if the user wants to switch the background color more conveniently, we can add a button to trigger the switching of the background color. This can be achieved by adding a button element contained in the HTML.

HTML sample code is as follows:

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

Copy after login

We added a button element and used the onclick attribute to specify the function toggleBackground() to be called when the button is clicked.

We need to add a function named toggleBackground(), the code is as follows:

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

Copy after login

This function is the same as the previous sample code, it uses an if statement to switch the background color. When the button is clicked, this function will be called and the background color will switch to another color.

4. Complete code implementation

The following is the complete HTML page code, which can be directly copied to the editor for use.

<!DOCTYPE html>
<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>
      function toggleBackground() {
        var body = document.querySelector('body');
        if (body.style.backgroundColor === 'white') {
          body.style.backgroundColor = 'black';
        } else {
          body.style.backgroundColor = 'white';
        }
      }
    </script>
  </head>
  <body>
    &lt;button onclick=&quot;toggleBackground()&quot;&gt;Click me!&lt;/button&gt;
    <div id="app">
      <h1>Hello, world!</h1>
    </div>
  </body>
</html>

Copy after login

In the entire HTML file, we added a <script> tag containing the toggleBackground() function, and added a <button> element in the <body> tag to trigger the switching of the background color. . When the button is clicked, the toggleBackground() function will be called and the background color will switch to another color.

This article introduces how to use Javascript’s if statement to switch the background color. At the same time, we also show you how to use the <button> element in an HTML page to trigger the switching of the background color. If you want to achieve more complex interactive effects through Javascript, you can learn this language in depth to make your web pages more lively and interesting.

The above is the detailed content of JavaScript uses if to change background color switching. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn