Change the Background of all Elements in a Class

问题

I have a div, when I clicked on it, should turn all the elements in the .counter class to red, but at the moment it does nothing. I believe you have to run through a loop first and then use this somehow to select all elements in the class width 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>

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

回答1:

Hi you can do this using for/of iteration on DOM lists such nodeList or HTMLCollection. since all recent versions of modern browsers (Safari, Firefox, Chrome, Edge) support it

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>

回答2:

   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>

回答3:

You just need to loop and apply styles. Your code is partially correct, some error though, see error at end.

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)

counter should be a string - the name of class

var i - 0

This should be var i = 0;

conole.log(myCounters[i])

Typo - its console

document.getElementsByClassName(i).style.backgroundColor = "red"

variable i is not accessible in myFunction - scope issue

回答4:

In addition to the given answers, I would suggest to apply style changes by adding a class to the elements and going about it via CSS. Applying inline styling takes up some more performance.

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

And then in your CSS

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

If only doing this for a few elements on the page, the performance drawback is negligible. If you're doing this for a lot of elements, i'd suggest doing it via CSS.

回答5:

A simpler way would be to have a css variable. The code only needs to change the value of the variable and any class that uses the variable is updated automatically.

For example:

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>

The variable is defined at the top of the STYLE tag and on the :root element. The .counter style references it using var(--counterbg) (these variables must start with --). The js just needs to change the value of the variable. In this example, I've done three buttons that change the variable to one of three different colours.

来源：https://stackoverflow.com/questions/64183839/change-the-background-of-all-elements-in-a-class

标签

javascript

css

function

loops

class