Maison > interface Web > tutoriel CSS > le corps du texte

Comment modifier dynamiquement l'image d'arrière-plan d'une division à l'aide de JavaScript et d'instructions conditionnelles ?

Barbara Streisand
Libérer: 2024-11-03 13:20:31
original
1017 Les gens l'ont consulté

How to Dynamically Change a Div's Background Image Using JavaScript and Conditional Statements?

Comment modifier l'image d'arrière-plan d'un élément div en JavaScript

Question :

Vous désirez modifier l'arrière-plan image d'un élément div avec le nom de classe « ghor » à l'aide de JavaScript et d'instructions conditionnelles. Cependant, votre code actuel affiche une erreur lorsque vous essayez d'utiliser el.url pour vérifier et modifier la source de l'image.

Explication :

Pour modifier dynamiquement l'image d'arrière-plan d'un élément div à l'aide de JavaScript, vous pouvez utiliser le code suivant :

<code class="js">document.getElementById("a").style.backgroundImage = "url(image_path.jpg)";</code>
Copier après la connexion

Dans ce cas, le code ciblerait l'élément div avec l'ID "a" et définirait sa propriété backgroundImage sur le chemin d'image spécifié.

Code révisé avec condition If-Else :

Pour implémenter une condition if-else pour changer l'image d'arrière-plan en fonction d'une condition spécifique, vous pouvez modifier votre code comme suit :

<code class="js">var el = document.getElementById("a");
if (el.style.backgroundImage.includes("Black-Wallpaper.jpg")) {
  el.style.backgroundImage = "url(cross1.png)";
} else if (el.style.backgroundImage.includes("cross1.png")) {
  alert("This is working too.");
}</code>
Copier après la connexion

Ce code révisé vérifie si l'image d'arrière-plan de la classe div "ghor" est définie sur "Black-Wallpaper.jpg" ou "cross1.png" et la modifie en conséquence. Si aucune des deux conditions n'est remplie, le message d'alerte "Cela fonctionne aussi." s'affiche.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal