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

How to Modify the Background Image of a div Element in JavaScript

Question:

You desire to modify the background image of a div element with class name "ghor" using JavaScript and conditional statements. However, your current code displays an error when you attempt to use el.url to check and modify the image source.

Explanation:

To dynamically change the background image of a div element using JavaScript, you can utilize the following code:

<code class="js">document.getElementById("a").style.backgroundImage = "url(image_path.jpg)";</code>

In this case, the code would target the div element with ID "a" and set its backgroundImage property to the specified image path.

Revised Code with If-Else Condition:

To implement an if-else condition for changing the background image based on a specific condition, you can modify your code as follows:

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

This revised code checks whether the background image of the "ghor" class div is set to "Black-Wallpaper.jpg" or "cross1.png," and changes it accordingly. If neither condition is met, the alert message "This is working too." is displayed.

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