如果两个 div 具有相同的类，则向两个 div 添加另一个类答案

【问题标题】：If both divs have same class add another class to both divs如果两个 div 具有相同的类，则向两个 div 添加另一个类
【发布时间】：2022-01-12 19:11:26
【问题描述】：

如何向具有相同 class 的 2 个 div 添加一个类？

在 this example 我有 3 个div，其中 2 个共享 class ".matched"。

如何在 JS 中向这 2 个 div 添加另一个类（例如 .sameclass）？

提前非常感谢！

<div class="container">
  <div class="box1 matched"></div>
  <div class="box2 matched"></div>
  <div class="box3"></div>
</div>

CSS

.container {
  display: flex;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box2 {
  width: 100px;
  height: 100px;
  background: green;
}

.box3 {
  width: 100px;
  height: 100px;
  background: purple;
}

【问题讨论】：

google.com/search?q=add+class+to+element+js
也许这会对你有所帮助：stackoverflow.com/questions/32586594/…
当您不知道哪个 CSS 类是由 2 个元素共享的时候，您是在问这个问题吗？或者您是否已经知道它应该是“匹配的”？

标签： javascript html css

【解决方案1】：

使用querySelectorAll 搜索元素，然后在循环中使用element.classList.add("matched") 添加类。

【讨论】：

【解决方案2】：

您必须获得对要添加 CSS 类的 DIV 的引用。在您的情况下，这些元素具有共享的 CSS 类 matched。 JavaScript 提供了一种非常棒的方法来获取名为 getElementsByClassName() 的特定类的所有元素。

let divs=document.getElementsByClassName("matched");

这将返回一个 HTMLcollection - 基本上是一个数组 - 所有元素的 CSS 类 matched。

现在循环存储在从步骤 1 获得的 HTMLCollection 中的元素，并使用.classList.add() 方法添加一个特定的类。例如

myElement.classList.add("anotherClass");

我们共同拥有：

let divs = document.getElementsByClassName("matched");

for (let a = 0; a < divs.length; a++) {
  divs[a].classList.add("anotherClass");
}

.anotherClass {
  color: red;
}

<div class="container">
  <div class="box1 matched">a</div>
  <div class="box2 matched">b</div>
  <div class="box3">c</div>
</div>

【讨论】：

【解决方案3】：

你可以这样写：

let elements = document.getElementsByClassName("matched");
for(let element of elements) {
    element.classList.add("same");
}

【讨论】：

【解决方案4】：

如果您的问题是针对 generic 解决方案，而您事先不知道哪个是可能由两个元素共享的 CSS 类，那么您需要检查 CSS 类当前分配给这些元素的元素，以检测哪个元素被两个元素共享。

这是执行此操作的代码。所以这段代码不会以硬编码的方式寻找“匹配”：

function findCommon(divs) {
    let map = {};
    for (let div of divs) {
        for (let cls of div.classList) {
            if (map[cls]) {
                return [map[cls], div];
            }
            map[cls] = div;
        }
    }
    return []; // Not found
}

let pair = findCommon(document.querySelectorAll(".container > div"));

for (let div of pair) { // Apply a style to the elements that were found:
    div.classList.add("highlight");
}

.container { display: flex; }
.container > div { 
    width: 100px; 
    height: 100px; 
    box-sizing: border-box; 
}

.box1 { background: red; }
.box2 { background: green; }
.box3 { background: purple; }
.highlight { border: 8px yellow solid; }

<div class="container">
  <div class="box1 matched"></div>
  <div class="box2 matched"></div>
  <div class="box3"></div>
</div>

【讨论】：

【解决方案5】：

您可以使用querySelectorAll 来获取具有该类名称的所有元素。它将返回与您的查询匹配的元素数组。

然后您可以使用 for 循环或 forEach 方法遍历该数组，并使用 classList.add 添加类名

像这样：

const boxes = document.querySelectorAll('.matched');

boxes.forEach((box) => {
  boxes.classList.add('sameClass');
});

【讨论】：