当 div 类不唯一时，我可以使用 Javascript 更改 div 类吗？

Question

有没有办法通过javascript来改变下面分配给这三个不同div的类。正如你所看到的，所有的类都是相同的，但样式不同，我希望能够按类控制样式：

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

实际上我希望结果是：

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

编辑，这是今天的 HTML……我不能直接编辑 HTML，所以我需要一种方法来更改背景颜色的颜色。

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

唯一使每个“待定任务值”独一无二的是“背景颜色”样式元素。我想更改背景颜色，使其如下所示，但我需要 javascript 来执行此操作，但不知道如何进行更新：

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

或者，如果有一种方法可以为每个“待定任务值”更改/添加样式以使它们独一无二，这样我就可以将 css 应用于它们，这对我也有用。

Answer 1

两种方法，取决于你是否事先知道 DOM 结构。

如果目标div 始终位于同一个DOM 位置即，即容器内的第二个div，您可以使用document.querySelectorAll() 方法的索引来定位它vis- a-vis document.querySelectorAll('div.pending-task-value')[1].classList.add('pending-task-value-phone').

另一方面，如果事先不知道顺序，并且在您的示例中唯一的唯一属性是 CSS 属性，那么 Window.getComputedStyle() 方法可能会解决您的用例。 MDN

一种思考方式：

1. 使用document.querySelectorAll()获取容器内的元素
2. 对于每个匹配元素
   • 获取计算样式
   • 如果唯一属性值与目标值匹配，请使用Element.classList.add() 添加所需的类名

Answer 2

您可能不应该这样做 - 正确的方法是实际编辑底层 HTML 甚至 CSS 来完成此操作。使用这种方法可能会在未来增加额外的维护工作量，而将样式集中在适当的 CSS 文件中并将样式与 JavaScript 应用程序逻辑解耦会更简洁、更易于维护。

但是，您可以做的是向document.body 插入一个任意的<style> 块，该块使用:nth-child() CSS pseudo-class 实现CSS 规则来完成您似乎正在寻找的东西（假设.card-body .row 内的内容每次都以相同的顺序出现：

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>