'Can I use Javascript to change div class when div class is not unique?

Is there a way through javascript to change the class below assigned to these three different divs. As you can see the class is the same on all but the styling is different and I want to be able to control styling by class:

<div class="pending-task-value" style="background-color: rgb(232, 188, 13);"> 0 <!----></div>

<div class="pending-task-value" style="background-color: rgb(47, 145, 211);"> 0 <!----></div>

<div class="pending-task-value" style="background-color: rgb(19, 152, 126);"> 0 <!----></div>

Effectively I want the outcome to be:

<div class="pending-task-value-total";> 0 <!---></div>
<div class="pending-task-value-phone";> 0 <!---></div>
<div class="pending-task-value-sms";> 0 <!---></div>

Edit, here is the HTML in place today... I can't directly edit the HTML so I need a way to change the colors of the background colors.

<div class="card-body">
  <div class="row" style="text-align: center;">
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: rgb(232, 188, 13);"> 0
        <!---->
      </div>
      <div><i class="fas fa-tasks"></i></div>
      <div>Total Pending</div>
    </div>
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: rgb(47, 145, 211);"> 0
        <!---->
      </div>
      <div><i class="fas fa-phone"></i></div>
      <div>Phone</div>
    </div>
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: rgb(19, 152, 126);"> 0
        <!---->
      </div>
      <div><i class="fas fa-sms"></i></div>
      <div>SMS</div>
    </div>
  </div>

The only thing that is making each "pending-task-value" unique is the "background-color" style element. I want to change the background-color so that it would be the following below but I need javascript to do it and can't figure out how to make the update:

<div class="card-body">
  <div class="row" style="text-align: center;">
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: #2B32B2;"> 0
        <!---->
      </div>
      <div><i class="fas fa-tasks"></i></div>
      <div>Total Pending</div>
    </div>
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: #1488CC;"> 0
        <!---->
      </div>
      <div><i class="fas fa-phone"></i></div>
      <div>Phone</div>
    </div>
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: #d63384;"> 0
        <!---->
      </div>
      <div><i class="fas fa-sms"></i></div>
      <div>SMS</div>
    </div>
  </div>

Or if there is a way to change/add a style to each "pending-task-value" to make them unique so I can then apply css to them would work for me too.

Solution 1:^[1]

Two approaches depending on whether you know the DOM structure in advance.

If the target div is consistently in the same DOM location i.e., the second div within a container, you can target it using the index of the document.querySelectorAll() method vis-a-vis document.querySelectorAll('div.pending-task-value')[1].classList.add('pending-task-value-phone').

On the other hand, if the order is not known in advance and the only unique property is, in your example, a CSS property, then the Window.getComputedStyle() method may solve your use case. MDN

One way of thinking about this:

Get the elements within the container using document.querySelectorAll()
For each matching element
- Get the computed style
- If the unique property value matches a target value, use Element.classList.add() to add the desired class name

Solution 2:^[2]

You probably shouldn't do this - the proper way would be to actually edit the underlying HTML or even the CSS to accomplish this. Leveraging this method can amount to loads of extra maintenance work in the future, whereas centralizing your styles in a proper CSS file and decoupling styling from your JavaScript application logic would be much cleaner and easier to maintain.

However, what you can do is insert an arbitrary <style> block to document.body that implements CSS rules using the :nth-child() CSS pseudo-class to accomplish what you seem to be looking for (assuming that the contents within .card-body .row appear in the same order each time:

var styleElement = document.createElement('style');
styleElement.innerText = `
.card-body .row .pending-task-value-col:nth-child(1) .pending-task-value {
  background-color: #2B32B2 !important;
}

.card-body .row .pending-task-value-col:nth-child(2) .pending-task-value {
  background-color: #1488CC !important;
}

.card-body .row .pending-task-value-col:nth-child(3) .pending-task-value {
  background-color: #d63384 !important;
}`;
document.body.appendChild(styleElement);

<div class="card-body">
  <div class="row" style="text-align: center;">
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: rgb(232, 188, 13);"> 0
        <!---->
      </div>
      <div><i class="fas fa-tasks"></i></div>
      <div>Total Pending</div>
    </div>
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: rgb(47, 145, 211);"> 0
        <!---->
      </div>
      <div><i class="fas fa-phone"></i></div>
      <div>Phone</div>
    </div>
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: rgb(19, 152, 126);"> 0
        <!---->
      </div>
      <div><i class="fas fa-sms"></i></div>
      <div>SMS</div>
    </div>
  </div>
</div>
<hr />
<div class="card-body">
  <div class="row" style="text-align: center;">
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: rgb(232, 188, 13);"> 0
        <!---->
      </div>
      <div><i class="fas fa-tasks"></i></div>
      <div>Total Pending</div>
    </div>
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: rgb(47, 145, 211);"> 0
        <!---->
      </div>
      <div><i class="fas fa-phone"></i></div>
      <div>Phone</div>
    </div>
    <div class="col-4 pending-task-value-col">
      <div class="pending-task-value" style="background-color: rgb(19, 152, 126);"> 0
        <!---->
      </div>
      <div><i class="fas fa-sms"></i></div>
      <div>SMS</div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	JLawton
Solution 2

'Can I use Javascript to change div class when div class is not unique?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]