Question 245950 in Html Question posted in
Some basic documentation can be found here.

HTML/CSS/Javascript: Change ul-li:before backround-image with javascript

I have a div that contains an ul that has a custom image as the marker:

HTML:

    <div class="block">
      <h2>Custom List</h2>
      <div class="ul-custom">
        <ul>
          <li>...</li>
          <li>..</li>
          <li>...</li>
      </ul>
      </div>
    </div>

CSS:

.ul-custom {
  ul {
    list-style: none;
    padding-left: 0;
    margin: 0;

    li {
      position: relative;
      padding-left: 20px;

      &:before {
        content: "";
        width: 15px;
        height: 26px;
        position: absolute;
        background-image: url("li-red.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        left: 0;
        top: 0;
      }
    }
  }
}

My question now, since I have the image in li:before, is there a way to change the url in javascript or not?

I’ve searched for it but couldnt find anything, but I’m sure there’s already something on the internet about this.

Hope someone can help me here, thanks in advance!

Or is there maybe an "easier" or "better" way to put the custom image on the li so it can be changed via javascript?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @CBroe, the solution was really easy.

    HTML-Code like above:

       <div class="block">
      <h2>Custom List</h2>
      <div class="ul-custom">
        <ul>
          <li>...</li>
          <li>..</li>
          <li>...</li>
      </ul>
      </div>
    </div>

    CSS (new):

    .ul-custom ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ul-custom ul li {
  position: relative;
  padding-left: 20px;
}

.ul-custom ul li:before {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  left: 0;
  top: 0;
}

.ul-custom.marker-1 ul li:before {
  background-image: url("...");
}
.ul-custom.marker-2 ul li:before {
  background-image: url("...");
}
.ul-custom.marker-3 ul li:before {
  background-image: url("...");
}
.ul-custom.marker-4 ul li:before {
  background-image: url("...");
}

    Javascript:

    let ul = document.querySelectorAll(".ul-custom");

ul.forEach((list) => {
  switch (...) {
    case "...":
      list.classList.add("marker-2");
      break;
    case "...":
      list.classList.add("marker-3");
      break;
    case "...":
      list.classList.add("marker-4");
      break;
    default:
      list.classList.add("marker-1");
      break;
  }
})

  2. 0

    If I understand correctly, you want to replace the background image ("li-red.png") using javascript. You should be able to do this something like this:

    // Select the li elements
const liElements = document.querySelectorAll('.ul-custom li');

// Function to change the background image
function changeBackgroundImage(element, newImageUrl) {
  element.style.backgroundImage = `url("${newImageUrl}")`;
}

// Example usage: Change the background image of the first li element
// Use this function where you want it to be called
changeBackgroundImage(liElements[0], 'new-image.png');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search