在许多共享相同的不同 div 中更改颜色 class

Question

我的网站有很多不同的 div。他们的共同点是都共享（除了他们独特的 classes）一个共享的 class。让我们称之为 .changeClass.

我正在寻找的是带有按钮（或单选按钮）的代码，通过单击该按钮，所有这些 div 的背景实例将获得相同的代码（.changeClass 具有） .因此，当按钮为 toggled/clicked.

时，.changeClass 将处于活动状态

我正在寻找一种使用纯 javascript 而不是 Jquery 的方法。

抱歉我是个菜鸟:-)

Answer 1

首先让我们获取 DOM

上的所有 div

const divs = document.getElementsByTagName("div");

您将拥有 DOM 上所有 div 的数组。然后将您的 class 添加到所有内容中。为了做到这一点，让我们循环它。

divs.forEach(div => div.className += div.className + " changeClass");

Answer 2

这会是您要找的吗？在 html:

<button onclick="changeColor('blue');">blue</button>

在 JS 中

function changeColor(newColor) {
    var elem = document.getElementsByClassName("changeClass");
    elem.style.color = newColor;
}

HTML 颜色可以是您想要的任何颜色，只需将它们的名称从蓝色更改为任何颜色或输入十六进制代码即可。

Answer 3

我们有多个具有相同 class 值的 div 我们已经使用 onclick 方法为按钮提供了一个函数，我们希望在单击按钮时发生事件。现在当我们点击按钮时，名为 myFunction 的函数将运行.

HTML:

<div class="changeClass">Im Example Div</div>
<div class="changeClass">Me Too</div>
<button type="submit" onclick="myFunction()">Click To Change Div BgColors ! 
</button>

我们必须将 myFunction 定义为 Javascript 并更改背景颜色。

我们定义了一个名为 myFunction 的函数。

通过我们函数中的 getElementsByClassName 选择器，我们获得了对象格式中具有 class 值 changeClass 的所有数据。

为所有这些对象添加背景（或任何 css 属性）；我们将对象放在一个 for 循环中，现在我们拆分我们的元素。我们现在可以使用 style.backgroundColor 参数为我们的元素定义背景颜色。

JavaScript:

function myFunction(){
    var divs = document.getElementsByClassName('changeClass');

    for(var i=0; i< divs.length; i++){
        divs[i].style.backgroundColor = 'red';
    }
}

更详细的可以参考资源：https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 4

不要因为对某事不熟悉并想了解更多而感到抱歉！

所以你的意思是你想改变的div都有一个共同的class“changeClass”。如果是这种情况，那么您希望向函数传递您要更改的颜色的参数值。由于您所有的 div 都是静态的并且您可能不打算更改，因此在此函数之外声明一个具有以下代码的变量

const divs = document.getElementsByClassName("changeClass")

然后，在函数内部，循环遍历变量“divs”或任何您想调用的变量中收集的所有 div。由于“getElementsByClassName”returns 是一个集合，它没有内置的“foreach”和“map”方法。因此，您必须使用 for 循环，最好是以下内容。

const divs = document.getElementsByClassName("changeClass");
function changeColor(color) {
   for (let element of divs) {
      element.style.backgroundColor = color;
   }
}

我可能理解有误，但希望对您有所帮助

Answer 5

在下面的解决方案中，单击 <button> 元素会将 add/remove class 样式 .changeClass 到具有 class 样式的所有元素 .apply 应用。

let button = document.getElementById('change');
let containers = document.getElementsByClassName('apply');

function changeButtonText() {
  if(button.innerHTML === "Add")
    button.innerHTML = "Remove";
  else
    button.innerHTML = "Add";
}

button.addEventListener('click', function() {
  for(let index = 0 ; index < containers.length ; ++index)
      containers[index].classList.toggle('changeClass');
  changeButtonText();
});

div {
  margin-top: 25px;
}
.apply {
  border: 3px solid black;
}
.changeClass {
  background-color: black;
  color: white;
  border: 3px solid red;
  margin-top: 25px;
}

<button id="change">Add</button>

<div class="apply">1</div>
<div class="apply">2</div>
<div class="apply">3</div>
<div class="apply">4</div>
<div class="apply">5</div>

Answer 6

您可能会发现使用 CSS 变量很有帮助。

例如：

function bg(color) {
  document.body.style.setProperty('--bg', color);
}

body {
  --bg: cyan;
}

.container {
  display: flex;
  gap: 1vw;
}

.container div {
  width: 100px;
  height: 100px;
  background-color: black;
}

.container div.changeClass {
  background-color: var(--bg);
}

<body>

  <button onclick="bg( 'red');">Red</button>
  <button onclick="bg( 'green');">Green</button>
  <button onclick="bg( 'blue');">Blue</button>
  <button onclick="bg( 'black');">Black</button>
  <div class="container">
    <div class="changeClass"></div>
    <div class="changeClass"></div>
    <div class="changeClass"></div>
    <div></div>
    <div class="changeClass"></div>
  </div>
</body>

然后，当单击其中一个单选按钮时，它会设置变量 --bg。

这是一个简单的片段：

Answer 7

首先 - 感谢您的所有回复。是的，我应该包含代码。我尝试了很多东西，但在某些时候我只是放弃了——搞不清什么是正确的代码，什么是垃圾代码。所以我非常感谢你们都花时间回答我。这是我的第一个 post 所以现在我知道未来了。我得到的所有答案都是解决我的问题的可能方法 - 谢谢大家。下次我会做得更好。你真棒...

顺便说一句 - 所有解决方案似乎都有效 - 但如您所知只能选中其中一个。

Answer 8

您可以添加或删除一个 class 以更改不同 div 的颜色：

document.queryselector('.className').classList.add('classNamethatyouwanttoadd');

document.queryselector('.className').classList.remove('classNamethatyouwanttoadd');

在许多共享相同的不同 div 中更改颜色 class

Change color in a number of different divs that all share the same class

html

javascript

css

selectors-api