更改类中所有元素的背景

编程问答 2022-06-10

问题描述

我有一个div，当我单击它时，应将.counter类中的所有元素都变为红色，但此刻它什么也不做。我相信您必须先运行一个循环，然后再使用这种方式选择类宽度JS中的所有元素？

CSS 

.counter {
  width: 100px;
  height:100px;
  background-color:orange;
}
#btn {
  background-color:aqua;
  width:50px;
  height:50px;
  position:absolute;
  left:200px;
  top:10px;
}

HTML 

<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> 
<div id="btn" onclick="myFunction()"></div>

JS 

var myCounters = document.getElementsByClassName("counter")
for (var i = 0; i < myCounters.length; i++){
   console.log(myCounters[i])
}
function myFunction() {
   document.getElementsByClassName(i).style.backgroundColor = "red"
}

解决方法

您只需要循环并应用样式。您的代码部分正确，但是有些错误，请参阅最后的错误。

var myCounters = document.getElementsByClassName("counter")

function myFunction() {
  for (var i = 0; i < myCounters.length; i++) {
    console.log(myCounters[i])

    myCounters[i].style.backgroundColor = "red"
  }
}
.counter {
  width: 100px;
  height: 100px;
  background-color: orange;
}

#btn {
  background-color: aqua;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 10px;
}
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div>
<div id="btn" onclick="myFunction()">some button</div>

var myCounters = document.getElementsByClassName（counter）

计数器应为字符串-类名

var i-0

这应该是var i = 0;

conole.log（myCounters [i]）

错字-其console

document.getElementsByClassName（i）.style.backgroundColor =“红色”

变量i在myFunction中不可访问-范围问题

, 

   function handleClick() {
   var myCounters = document.getElementsByClassName("counter")
   for (var i = 0; i < myCounters.length; i++) {
    myCounters[i].style.backgroundColor = "red"
   }

}
.counter {
  width: 100px;
  height: 100px;
  background-color: orange;
}

#btn {
  background-color: aqua;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 10px;
}
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div>
<div id="btn" onclick="handleClick()"></div>

,

除了给出的答案外，我建议通过向元素添加类并通过CSS进行样式更改来应用样式更改。应用内联样式会提高性能。

function myFunction() {
    var myCounters = document.getElementsByClassName("counter")
    for (var i = 0; i < myCounters.length; i++) {
        console.log(myCounters[i])
        myCounters[i].classList.toggle('red');
        //using '.toggle' will remove the class again upon clicking the button and re-add when clicking again,and so forth. Replace .toggle by .add to only add the class if that's your use-case.
    }
}

然后在您的CSS中

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

如果仅对页面上的几个元素执行此操作，则性能缺陷可以忽略不计。如果您要对很多元素进行此操作，建议您通过CSS进行。

,

嗨，您可以在DOM列表（例如nodeList或HTMLCollection）上使用for / of迭代来完成此操作。因为所有最新版本的现代浏览器（Safari，Firefox，Chrome，Edge）都支持

function myFunction() {
   let counters = document.getElementsByClassName("counter");
   for(let counter of counters){
     counter.style.backgroundColor = 'red';
   }
}
 .counter {
    width: 100px;
    height:100px;
    background-color:orange;
}
#btn {
    background-color:aqua;
    width:50px;
    height:50px;
    position:absolute;
    left:200px;
    top:10px;
}
 <div class="counter"></div> <br>
   <div class="counter"></div> <br>
   <div class="counter"></div> <br>
   <div class="counter"></div> <br>
   <div class="counter"></div> 
   <div id="btn" onClick="myFunction()">
</div>

,

一个更简单的方法是拥有一个css变量。代码只需更改变量的值，使用该变量的任何类都会自动更新。

例如：

function myFunction(c) {
  document.documentElement.style.setProperty("--counterbg",c);
}
:root {--counterbg: orange;}

.counter {
  width: 100px;
  height:100px;
  background-color:var(--counterbg);
}
#btn {
  width:100px;
  height:50px;
  position:relative;
  display:inline;
}
<button id="btn" onclick="myFunction('red')">Red</button><button id="btn" onclick="myFunction('green')">Green</button><button id="btn" onclick="myFunction('blue')">Blue</button>

<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div>

该变量在STYLE标记的顶部和:root元素上定义。 .counter样式使用var(--counterbg)进行引用（这些变量必须以--开头）。 js只需要更改变量的值即可。在此示例中，我完成了三个按钮，将变量更改为三种不同颜色之一。

classclassclassfunctionfunctionfunctionjavascriptloops