En JavaScript, certaines pages Web nécessitent une mise en page attrayante, comme des arrière-plans sombres qui fonctionnent généralement mieux pour les interfaces. De même, les arrière-plans blancs permettent aux lecteurs de se concentrer sur le contenu. Ainsi, les portails d'actualités ou les blogs utilisent un arrière-plan relativement clair avec du texte sombre. Dans de tels cas, JavaScript devient très pratique pour formater et améliorer la conception de documents.
Cet article discutera des méthodes pour changer l'image d'arrière-plan en JavaScript.
Comment changer l'image d'arrière-plan en JavaScript ?
Pour modifier l'image d'arrière-plan en JavaScript, les approches suivantes peuvent être utilisées :
- ' image de fond « propriété sur » DOM ”.
- ' getElementById() 'méthode et' image de fond « propriété sur » paragraphe ”.
Parcourez les méthodes discutées une par une!
Méthode 1 : modifier l'image d'arrière-plan en JavaScript à l'aide de la propriété backgroundImage sur DOM.
La ' image de fond ” La propriété ajuste l'image d'arrière-plan de l'élément spécifié. Cette technique peut être appliquée en appliquant la propriété backgroundImage et en spécifiant l'image d'arrière-plan en localisant son chemin comme argument.
Syntaxe
Dans la syntaxe ci-dessus, ' URL » fait référence au chemin de l'image.
Regardez l'exemple suivant pour la démonstration.
Exemple
Dans cet exemple, un bouton sera inclus avec la valeur spécifiée et un ' sur clic ” événement redirigeant vers un
fonction nommée backgroundImage() :
Maintenant, une fonction ' image de fond() » sera déclaré et le « document.body.style.backgroundImage ” accédera à l'image d'arrière-plan en utilisant le chemin d'image spécifié dans son argument :
La sortie de l'implémentation ci-dessus se traduira comme suit :
Méthode 2 : modifier l'image d'arrière-plan en JavaScript à l'aide de la méthode getElementById() et de la propriété backgroundImage sur le paragraphe
La ' getElementById() » renvoie un élément avec une valeur spécifiée et la méthode « image de fond ', comme indiqué ci-dessus, renvoie l'image d'arrière-plan de l'élément particulier spécifié dans son argument. Cette méthode peut être appliquée pour mapper la couleur spécifiée sur l'arrière-plan du paragraphe particulier.
Syntaxe
Ici, ' éléments ” fait référence à l'identifiant d'un élément.
Passez en revue l'exemple suivant pour une meilleure compréhension du concept énoncé.
Exemple
Tout d'abord, incluez un paragraphe dans la balise
et attribuez-lui un identifiant spécifique :
Ensuite, créez un bouton avec un événement onclick accédant à la fonction backgroundImage() comme indiqué dans la méthode précédente :
Enfin, déclarez la fonction nommée ' image de fond() ' De même. Ici, accédez à l'identifiant défini en utilisant le ' getElementById() ” et appliquez-y l'image d'arrière-plan spécifiée. Cela se traduira par la mise en place de la couleur sur le fond du paragraphe :
Production
Nous avons compilé la méthode la plus simple pour changer l'image d'arrière-plan en Javascript
Conclusion
Pour changer l'image de fond en Javascript, appliquez le ' image de fond « propriété sur » DOM ' pour appliquer l'image d'arrière-plan spécifiée sur l'ensemble de la page Web à l'aide d'une fonction ou en obtenant l'identifiant particulier à l'aide ' getElementById() « méthode et application » image de fond ” propriété sur le spécifié “ paragraphe ”. Ce blog illustre les méthodes pour modifier les images d'arrière-plan en JavaScript.