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

Changing Div Background Image with JavaScript

Question:

How can I alter the background image of a div element with JavaScript, using an if-else condition?

Code Snippet:

<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:

The goal is to update the background image of the div with class "ghor" based on the current background image.

Answer:

To achieve this, you can use the following code:

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

Explanation:

This code retrieves the div element with id "a" and sets its background-image style property to the specified image path. By replacing "images/img.jpg" with the desired image path, you can change the background image dynamically.

Sample CSS for '.ghor' Class:

<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>

Please note that the provided code is for illustrative purposes and may require adjustments based on your specific implementation and CSS styles.

The above is the detailed content of How to Dynamically Change a Div\'s Background Image with JavaScript Using an If-Else Condition?. For more information, please follow other related articles on the PHP Chinese website!