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 <script> est ajoutée à la balise <head> du HTML pour introduire le fichier Javascript. L'exemple de code est le suivant : </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">Copier après la connexion</div></div><p> 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 : </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">Copier après la connexion</div></div><p> 2. Javascript implémente le changement de couleur d'arrière-plan</p><p>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. </p><p>L'exemple de code est le suivant : </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">Copier après la connexion</div></div><p>Analyse du code : </p><p>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. </p><p>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 ; </p><p>3. Utilisez le bouton pour déclencher le changement de couleur d'arrière-plan</p><p>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. </p><p>L'exemple de code HTML est le suivant : </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">Copier après la connexion</div></div><p>Nous avons ajouté un élément bouton et utilisé l'attribut onclick pour spécifier la fonction toggleBackground() à appeler lorsque le bouton est cliqué. </p><p>Nous devons ajouter une fonction appelée toggleBackground(), le code est le suivant : </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">Copier après la connexion</div></div><p>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. </p><p>4. Implémentation complète du code</p><p>Ce qui suit est le code complet de la page HTML, qui peut être directement copié dans l'éditeur pour utilisation. </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>
