Maison >interface Web >tutoriel CSS >Comment modifier dynamiquement l'image d'arrière-plan d'un Div avec JavaScript à l'aide d'une condition If-Else ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-02 10:03:30979parcourir

How to Dynamically Change a Div's Background Image with JavaScript Using an If-Else Condition?

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!

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