recherche

Maison >interface Web >Questions et réponses frontales >JavaScript utilise if pour modifier le changement de couleur d'arrière-plan

JavaScript utilise if pour modifier le changement de couleur d'arrière-plan

WBOY
WBOYoriginal
2023-05-12 14:16:37910parcourir

JavaScript est un langage de programmation de haut niveau largement utilisé dans le développement Web. Javascript peut être utilisé pour modifier le style des pages Web, notamment en modifiant la couleur, la police et le style des éléments. Cet article explique comment utiliser l'instruction if de Javascript pour changer la couleur d'arrière-plan.

1. Préparation

Avant d'utiliser Javascript, vous devez d'abord l'introduire dans la page HTML. Habituellement, une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a est ajoutée à la balise 93f0f5c25f18dab9d176bd4f6de5d30e du HTML pour introduire le fichier Javascript. L'exemple de code est le suivant : 

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

De plus, nous avons également besoin d'un élément de page pour afficher la couleur d'arrière-plan. Dans cet exemple, nous sélectionnons l’élément body comme zone d’affichage de la couleur d’arrière-plan. Le code HTML est le suivant : 

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

2. Javascript implémente le changement de couleur d'arrière-plan

Après avoir introduit Javascript dans la page HTML, nous pouvons utiliser Javascript pour contrôler le style des éléments de la page. Dans cet exemple, nous pouvons utiliser Javascript pour modifier la couleur d'arrière-plan de l'élément body. Vous pouvez utiliser une instruction if pour changer la couleur d'arrière-plan.

L'exemple de code est le suivant : 

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

Analyse du code :

Tout d'abord, nous utilisons document.querySelector('body') pour obtenir l'élément body. Cette fonction renvoie une référence à un élément, qui peut être manipulé à l'aide du corps dans le code.

Ensuite, nous utilisons l'instruction if pour déterminer si la couleur d'arrière-plan actuelle est blanche. Si la couleur d'arrière-plan actuelle est blanche, définissez la couleur d'arrière-plan sur noir ; sinon, définissez la couleur d'arrière-plan sur blanc ;

3. Utilisez le bouton pour déclencher le changement de couleur d'arrière-plan

Maintenant, nous avons implémenté le changement de couleur d'arrière-plan via l'instruction Javascript if. Cependant, si l'utilisateur souhaite changer la couleur d'arrière-plan plus facilement, nous pouvons ajouter un bouton pour déclencher le changement de couleur d'arrière-plan. Ceci peut être réalisé en ajoutant un élément bouton contenu dans le code HTML.

L'exemple de code HTML est le suivant : 

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

Nous avons ajouté un élément bouton et utilisé l'attribut onclick pour spécifier la fonction toggleBackground() à appeler lorsque le bouton est cliqué.

Nous devons ajouter une fonction appelée toggleBackground(), le code est le suivant : 

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

Cette fonction est la même que l'exemple de code précédent, elle utilise une instruction if pour changer la couleur d'arrière-plan. Lorsque vous cliquez sur le bouton, cette fonction sera appelée et la couleur d'arrière-plan passera à une autre couleur.

4. Implémentation complète du code

Ce qui suit est le code complet de la page HTML, qui peut être directement copié dans l'éditeur pour utilisation. 

 

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

Dans l'ensemble du fichier HTML, nous avons ajouté une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a contenant la fonction toggleBackground(), et ajouté un élément bb9345e55eb71822850ff156dfde57c8 Lorsque vous cliquez sur le bouton, la fonction toggleBackground() sera appelée et la couleur d'arrière-plan passera à une autre couleur.

Cet article explique comment utiliser l'instruction if de Javascript pour changer la couleur d'arrière-plan. Parallèlement, nous vous montrons également comment utiliser l'élément bb9345e55eb71822850ff156dfde57c8 dans une page HTML pour déclencher le changement de couleur d'arrière-plan. Si vous souhaitez obtenir des effets interactifs plus complexes grâce à Javascript, vous pouvez apprendre ce langage en profondeur pour rendre vos pages Web plus vivantes et intéressantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Modifier les nœuds en javascriptArticle suivant：Modifier les nœuds en javascript

Articles Liés

Voir plus