Comment modifier dynamiquement l'image d'arrière-plan d'un Div avec JavaScript à l'aide d'une condition If-Else ?

Changer l'image d'arrière-plan div avec JavaScript

Question :

Comment puis-je modifier l'arrière-plan image d'un élément div avec JavaScript, en utilisant une condition if-else ?

Extrait de code :

<code class="html"><div style="text-align:center;">
  <div class="ghor" id="a" onclick="chek_mark()"></div>
  function call
</div>
<script type="text/javascript">
  function chek_mark() {
    var el = document.getElementById("a").style.backgroundImage;
    if (el.url("Black-Wallpaper.jpg")) {
      el.url = "cross1.png";
    } else if (el.url("cross1.png")) {
      alert("<h1>This is working too.</h1>");
    }
  }
</script></code>

Clarification :

Le but est de mettre à jour l'image d'arrière-plan du div avec la classe "ghor" en fonction de l'image d'arrière-plan actuelle.

Réponse :

Pour y parvenir, vous pouvez utiliser le code suivant :

<code class="javascript">document.getElementById('a').style.backgroundImage="url(images/img.jpg)";</code>

Explication :

Ce code récupère l'élément div avec l'identifiant "a" et définit sa propriété de style d'image d'arrière-plan sur le chemin d’image spécifié. En remplaçant "images/img.jpg" par le chemin de l'image souhaité, vous pouvez modifier l'image d'arrière-plan de manière dynamique.

Exemple CSS pour la classe '.ghor' :

<code class="css">.ghor {
    background-image: url('Black-Wallpaper.jpg');
    background-size: cover;
    border-radius: 5px;
    height: 100px;
    width: 100px;
    box-shadow: 2px 5px 7px 7px white;
    display:inline-block; 
}</code>

Veuillez noter que le code fourni est à des fins d'illustration et peut nécessiter des ajustements en fonction de votre implémentation spécifique et de vos styles CSS.

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!