JavaScript uses if to change background color switching
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: </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">Copy after login</div></div><p> 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: </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">Copy after login</div></div><p> 2. Javascript implements background color switching</p><p>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. </p><p>The sample code is as follows: </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">Copy after login</div></div><p>Code analysis: </p><p>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. </p><p>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. </p><p>3. Use the button to trigger the background color switching</p><p>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. </p><p>HTML sample code is as follows: </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">Copy after login</div></div><p>We added a button element and used the onclick attribute to specify the function toggleBackground() to be called when the button is clicked. </p><p>We need to add a function named toggleBackground(), the code is as follows: </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">Copy after login</div></div><p>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. </p><p>4. Complete code implementation</p><p>The following is the complete HTML page code, which can be directly copied to the editor for use. </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>