Home > Article > Web Front-end > JavaScript uses if to change background color switching

JavaScript uses if to change background color switching

WBOYOriginal: 2023-05-12 14:16:37861browse

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag is added to the 93f0f5c25f18dab9d176bd4f6de5d30e tag of HTML to introduce the Javascript file. The sample code is as follows:

<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>

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:

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

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';
}

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:

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

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';
  }
}

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.

 

  
    
    
    <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 the entire HTML file, we added a 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag containing the toggleBackground() function, and added a bb9345e55eb71822850ff156dfde57c8 element in the 6c04bd5ca3fcae76e30b72ad730ca86d 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 bb9345e55eb71822850ff156dfde57c8 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：

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

Previous article：Modify nodes in javascriptNext article：Modify nodes in javascript

See more

JavaScript uses if to change background color switching

Hello, world!

Related articles