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

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  style="background-color: rgb(232, 188, 13);"> 0 <!----></div>

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

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

Effectively I want the outcome to be:

<div ;> 0 <!---></div>
<div ;> 0 <!---></div>
<div ;> 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 >
  <div  style="text-align: center;">
    <div >
      <div  style="background-color: rgb(232, 188, 13);"> 0
        <!---->
      </div>
      <div><i ></i></div>
      <div>Total Pending</div>
    </div>
    <div >
      <div  style="background-color: rgb(47, 145, 211);"> 0
        <!---->
      </div>
      <div><i ></i></div>
      <div>Phone</div>
    </div>
    <div >
      <div  style="background-color: rgb(19, 152, 126);"> 0
        <!---->
      </div>
      <div><i ></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 >
  <div  style="text-align: center;">
    <div >
      <div  style="background-color: #2B32B2;"> 0
        <!---->
      </div>
      <div><i ></i></div>
      <div>Total Pending</div>
    </div>
    <div >
      <div  style="background-color: #1488CC;"> 0
        <!---->
      </div>
      <div><i ></i></div>
      <div>Phone</div>
    </div>
    <div >
      <div  style="background-color: #d63384;"> 0
        <!---->
      </div>
      <div><i ></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.

CodePudding user response：

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

CodePudding user response：

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 >
  <div  style="text-align: center;">
    <div >
      <div  style="background-color: rgb(232, 188, 13);"> 0
        <!---->
      </div>
      <div><i ></i></div>
      <div>Total Pending</div>
    </div>
    <div >
      <div  style="background-color: rgb(47, 145, 211);"> 0
        <!---->
      </div>
      <div><i ></i></div>
      <div>Phone</div>
    </div>
    <div >
      <div  style="background-color: rgb(19, 152, 126);"> 0
        <!---->
      </div>
      <div><i ></i></div>
      <div>SMS</div>
    </div>
  </div>
</div>
<hr />
<div >
  <div  style="text-align: center;">
    <div >
      <div  style="background-color: rgb(232, 188, 13);"> 0
        <!---->
      </div>
      <div><i ></i></div>
      <div>Total Pending</div>
    </div>
    <div >
      <div  style="background-color: rgb(47, 145, 211);"> 0
        <!---->
      </div>
      <div><i ></i></div>
      <div>Phone</div>
    </div>
    <div >
      <div  style="background-color: rgb(19, 152, 126);"> 0
        <!---->
      </div>
      <div><i ></i></div>
      <div>SMS</div>
    </div>
  </div>
</div>